This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Closed 6 years ago.
How do I force my <a> element with an image appear in center of my div? And should I try to center an a element first, so it work out?
<div class="col-md-6 logo">
<a class="navbar-brand" href="/index.html">
<img src="#">
</a>
</div>
try style="text-align:center" :
<div class="col-md-6 logo" style="text-align:center">
<a class="navbar-brand" href="/index.html">
<img src="#">
</a>
</div>
put your img a class like
In css
img.example { margin : auto; }
Problem solved, navbar-brand has
float:right
by default. so i shanged it to
:none;
and
text align: center;
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:
CSS Float: Floating an image to the left of the text
(7 answers)
Closed 3 years ago.
I am trying to align my logo next to the h1, but the logo always goes above it. I'm a beginner to html and css. I tried all other answers in Stack Overflow.
Here’s my code:
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"> <h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
You have not added the class (css) float left.
I have added css here is the code
HTML
<div class="cust-container">
<img src="img/gostack.png" id="yourlogo" alt="The only logo" class='iconDetails'>
<h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
CSS
.cust-container {
width:100%;
height:auto;
padding:1%;
}
.iconDetails {
margin-left:2%;
float:left;
height:40px;
width:40px;
}
h1 {
margin:0px;
}
Here is the link https://jsfiddle.net/Arpit09/fwxjvy1d/4/
In HTML, block elements expand to fill all available horizontal space, forcing all other elements to flow either above or below the responsible element. To fix this, you can either change the display properties of your elements or use something like CSS Grid or Flex. I recommend just adding display: flex to your .logo class
.logo{
display: flex;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"><h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
You can add a class "inline" in your h1 and add this CSS property to it:
.inline {
display: inline;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo">
<h1 class="text-light inline" ><span><strong>GoStack</strong></span></h1>
</div>
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.
please read the full post before marking this as a duplicate
We're all familiar with the annoying default agent stylesheet from browsers. We're probably also familiar with the annoying anchor and image tags with whitespace underneath it.
So here's my issue:
HTML:
<div>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
</div>
I used some social icons for test purposes and it looks like this:
I want the anchor to be a square, so in my CSS I simply say a { display: inline-block; }
But now there's a whitespace underneath the image, so in my CSS I say img { display: block }
Everything with the anchor tag and image tag seems to be fine now, but...
Now there's a whitespace inside the div, without there's any evidence it's either the anchor tag or the image tag.
You might think: "well that's easy. Just say div { font-size: 0 } in your CSS". Well that causes another issue: the div does not measure the height very well. It slices off one pixel on the top:
So if there are any fixes: how would I fix this without ugly fixes like: padding-top: 1px or margin-bottom: ...px
If there are no fixes: that would be weird
Try adding a { float:left } or a { vertical-align: middle }
Flexbox works nice.
div, a {
display: flex;
justify-content: center;
}
a:not(:last-child) {
margin-right: 1em;
}
<div>
<a href="#">
<img src="http://placehold.it/100">
</a>
<a href="#">
<img src="http://placehold.it/100">
</a>
<a href="#">
<img src="http://placehold.it/100">
</a>
</div>
This question already has answers here:
Bootstrap: How to center align content inside column? [duplicate]
(2 answers)
Closed 6 years ago.
I have this code:
<div class="article-quiz-content.container">
<div class="row">
<div class="col-xs-6.quiz-cols">
<div class="true-placeholder">
<a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
</div>
</div>
<div class=col-xs-6.quiz-cols">
<div class="false-placeholder">
<a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
</div>
</div>
</div>
</div>
Which leads to this:
I need those icons to be in the center of the columns.
Suggestions?
Just add class text-center to your columns (.col-xs-6)
Reference: https://getbootstrap.com/css/#type-alignment
EDIT: after you changed markup you need to add it to placeholder divs
You can do something like this in your css:
.quiz-cols{
text-align: center;
}
.amenitie_icon{
display: inline-block;
}
Inline-block element float to center if container has text-align: center