Why is the image not rendered exactly in the middle of the enclosing DIV in this example?
div {
border: 1px solid gray;
line-height: 100px;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
If we run this example, we see that the image is closer to the bottom border than the top border.
Why does this happen?
What is the right way to vertically align an image in a DIV so that it is exactly in the middle of the DIV vertically?
If we check the documentation we will read this:
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.
So we need to identify these values in order to understand the alignement. If we refer to the above figure we can clearly see the baseline and we can also see the line-height (defined by 100px in our case). You can aslo notice that the middle is not the middle of the div but the middle of the text defined by the different values (font-family, font-size, etc).
To use easy words: your reference of alignment is no the div but the text inside the div.
To make it easier let keep the line-height with the default value and define a font-size instead (the line-height will be then equal to the font-size):
div {
border: 1px solid gray;
font-size:50px;
}
img {
height: 46px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
with a different font-family
<div style="font-family:arial">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You can cleary see that the middle is far from the middle of the div and if we change the font-family the alignment will also change.
In order to align content inside a div that contain text better rely on flexbox for example:
div {
border: 1px solid gray;
font-size:50px;
display:flex;
align-items:center;
}
img {
height: 46px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
that the element would be where it is required, he needs to specify it
img {
height: 96px;
width: 120px;
margin-left: calc(50% - 60px);
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You could just add equal padding on the top and bottom of the div. This helps you to align the image in the center. There are also many other ways to center align items.
Please go through the article https://vanseodesign.com/css/vertical-centering/
div {
border: 1px solid gray;
padding: 20px 0;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
What is the right way to vertically align an image in a DIV ?
you can do it with vertical-align: middle;
div {
border: 1px solid gray;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
or you can use flexbox
div {
border: 1px solid gray;
display:flex;
align-items:center;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}
I am working on a menu system which consists of div's (width: 275px, height: 75px, border: 1px solid) among each other. I want the whole div to be clickable, which I do with an a tag and display:block property (see code below). Some of the menu entries are multi-lined text, but I can't align them vertically. The basic code is:
.div {
width: 275px;
height: 75px;
border: 1px solid #000;
text-align: center;
float: right;
}
<div class="div">
<a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>
I have tried the following:
line-height: 75px: that doesn't work with multi-lined text
display: table and vertical-align: middle does not work with the 100% width and height of the -tag.
I have really tried a lot other code with wrapper div's, tables, ... but with no success.
Otherwise, I do not want to make use of javascript (onclick="location.href").
Thanks!
You can do it with what you've already tried: 'display:table-cell; vertical-align: middle;', you just have to set the height to 75px instead of 100%.
Use display:table-cell, to achieve vertically centred multi-lined text.
JSFiddle Demo
CSS:
div {
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
display: table-cell;
vertical-align: middle;
}
Lets say I have a bootstrap button with a font-awesome icon and some text:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
How do I make text appear vertically centered?
Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/
I just had to do this myself, you need to do it the other way around.
do not play with the vertical-align of your text
play with the vertical align of the font-awesome icon
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>
Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.
See here:
Vertical alignment of text and icon in button
If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following
<div class='my-fancy-container'>
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
</div>
.my-icon {
vertical-align: middle;
font-size: 40px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}
for a working example, please see JsFiddle
I use icons next to text 99% of the time so I made the change globally:
.fa-2x {
vertical-align: middle;
}
Add 3x, 4x, etc to the same definition as needed.
After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:
See Jsfiddle Demo
CSS:
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}
if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.
You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:
i.fa {
line-height: inherit;
}
Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.
a flexbox option - font awesome 4.7 and below
FA 4.x Hosted URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
line-height: 40px; /* vertically size by height, line-height or padding */
padding: 0px 10px; /* horizontal with padding-l/r */
border: 1px solid #ccc;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class='fa fa-2x fa-camera'></i>
hello world
</div>
fiddle
http://jsfiddle.net/Hastig/V7DLm/180/
using flex and font awesome 5
FA 5.x Hosted URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
padding: 3px 10px; /* horizontal vertical position with padding */
border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
<i class='fas fa-camera'></i>
hello world
</div>
<div class="icon-clock">
<i class='fas fa-clock'></i>
hello world
</div>
fiddle
https://jsfiddle.net/3bpjvof2/
The simplest way is to set the vertical-align css property to middle
i.fa {
vertical-align: middle;
}
This worked well for me.
i.fa {
line-height: 100%;
}
Try set your icon as height: 100%
You don't need to do anything with the wrapper (say, your button).
This requires Font Awesome 5. Not sure if it works for older FA versions.
.wrap svg {
height: 100%;
}
Note that the icon is actually a svg graphic.
Demo
For those using Bootstrap 4 is simple:
<span class="align-middle"><i class="fas fa-camera"></i></span>
Another option to fine-tune the line height of an icon is by using a percentage of the vertical-align property. Usually, 0% is a the bottom, and 100% at the top, but one could use negative values or more than a hundred to create interesting effects.
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}
I would wrap the text in a so you can target it separately. Now if you float both and left, you can use line-height to control the vertical spacing of the . Setting it to the same height as the (30px) will middle align it. See here.
New Markup:
<div>
<i class='icon icon-2x icon-camera'></i>
<span id="text">hello world</span>
</div>
New CSS:
div {
border: 1px solid #ccc;
height: 30px;
margin: 60px;
padding: 4px;
vertical-align: middle;
}
i{
float: left;
}
#text{
line-height: 30px;
float: left;
}
When using a flexbox, vertical alignment of font awesome icons next to text can be very difficult. I tried margins and padding, but that moved all items. I tried different flex alignments like center, start, baseline, etc, to no avail. The easiest and cleanest way to adjust only the icon was to set it's containing div to position: relative; top: XX; This did the job perfectly.
Well, this question was asked years ago. I think technology has changed quite a bit and browser compatibility is much better. You could use vertical-align but I would consider that some what less scaleable and less reusable. I would recommend a flexbox approach.
Here is the same example the original poster used but with flexbox. It styles a single element. If a button size changes for whatever reason, it will continue to be vertically and horizontally centered.
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
Example: JsFiddle
Simply define vertical-align property for the icon element:
div .icon {
vertical-align: middle;
}
for me, just making the element display gird, and aligning content works perfectly. simply solution.
.yourfontawesome<i>Element{
display: grid;
align-content: center;
}