This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I have 2 images, only the first image is visible, on hover a menu-bar will slide to the right and then it shows the 2nd picture right next to the 1st image, but there is a little space between the images. Is there a way how I can fix this?
This is the HTML code I have:
<!-- Side Header -->
<div class="side-header side-content bg-white-op">
<a class="h5 text-white" href="index.html">
<i><img src="assets/img/test.png" height="25px"></i> <span class="sidebar-mini-hide"><img src="assets/img/logo.png" height="25px"></span>
</a>
</div>
<!-- END Side Header -->
.side-header a i, .side-header a span { float: left; }
Related
This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 2 years ago.
I want to hide the text..
<div id: "hideen_text"
<a href="http://localhost:3000/photos/12.html">
<img src="https:0f25438da28b758ea0a65d69c188e505.jpg" width="2500" height="1685">
1758345.jpg (I WANT TO HIDE THIS ONE)
</a>
</div>
Any Clue for this? THX
Hiding the complete div would be:
<div style="display: none">
Hiding just the text in the div would be this:
<div>
<a href="http://localhost:3000/photos/12.html">
<img src="https:0f25438da28b758ea0a65d69c188e505.jpg" width="2500" height="1685">
<div style="display:none">1758345.jpg</div>
</a>
</div>
In your CSS, use:
#hideen_text {
display: none;
}
This question already has answers here:
Center image using text-align center?
(28 answers)
Closed 2 years ago.
I am trying to move image to center but the image moves slightly to right only (not to center). i have used many methods but all in vain.
Code format is given below and it is a separate div.
<div style="width: 50%">
<img class="center"src="resources/images/Brewery.png
id="functionImage" height="240" alt="#{loginweb.userFunction}"/>
</div>
Center an Image
.img-container-block {
text-align: center;
}
.img-container-inline {
text-align: center;
display: block;
}
<!-- Block parent element -->
<div class="img-container-block">
<img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</div>
<!-- Inline parent element -->
<span class="img-container-inline">
<img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</span>
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
CSS - Border where only half of a border is visible
(5 answers)
Closed 4 years ago.
How would I be able to achieve this decoration style look in a full width container? I want it to be positioned left of the start of the text, with a maximum width.
<div>
<h2 style="margin-bottom: 0; position: relative;display: inline;" >
BLOG
<div style="width: 20px;border: 2px solid red;position: absolute;">
</div>
</h2>
</div>
This question already has answers here:
How to vertically and horizontally center this text inside bootstrap4 columns? [duplicate]
(4 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Bootstrap 4, How do I center-align a button?
(10 answers)
Closed 5 years ago.
I have this column in my Bootstrap grid:
<div class=col-sm-2>
<div class="w-75 mx-auto">
<br><a class='button btn btn-outline-dark' href='{% url "elections:new_post" %}'>New Post</a><br><br>
<a class='button btn btn-outline-dark' href='{% url "elections:new_image" %}'>New Image</a><br><br>
<div class='card'>
<div class='card-body'>
<p>Test</p>
</div>
</div>
</div>
</div>
Because of the mx-auto, I would expect everything within those div tags to be centered, but the buttons are anchored to the left margin, as is the card and the text within the card.
How do I center the buttons and the card?
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 5 years ago.
There is always a 6 pixels space below the image. I am using materialize instead of bootstrap.
<div class="container">
<div class="row">
<div class="no-padding">
<img src="https://i1.wp.com/testing.datahub.io/static/img/logo-cube03.png" />
</div>
</div>
body {
background-color: #2c3e50;
}
Also link to JSFiddle
My code is very simple, even I clean all of the other things.
When I inspect on div class="no-padding" it shows 486 pixels and when I inspect on the img it shows 480 pixels.
I want to remove the 6 pixels space.
Adding display: block; to the image is one fix.
See also : What is the gap or extra space below image?