I am coding the header of my webpage.
But I found that the elements(sometimes image, sometimes textfield) inside my div did not align vertically.
I tried to use vertical-align: middle and line-height but fail to do the job.
http://jsfiddle.net/v68jpypz/1/
#free-wifi {
line-height: 28px;
display: inline-block;
margin-right: 50px;
vertical-align: middle;
}
vertical-align: middle only works when the element is marked as a table-cell, so do it like this:
#free-wifi {
display: table-cell;
margin-right: 50px;
vertical-align: middle;
}
See it work here: http://jsfiddle.net/xv6mthv5/1/
http://jsfiddle.net/v68jpypz/7/
.right {
float: right;
display:table;
}
#social-network {
line-height: 1.5em;
display: table-cell;
vertical-align:middle;
}
You can do the same for the left div.
Related
I'm trying to use vertical-align: middle to vertically center an inline-block element within some text.
p {
background: red;
line-height: 20px;
display: block;
}
span {
height: 18px;
width: 18px;
display: inline-block;
background: lightblue;
vertical-align: middle;
}
<p>
<span></span>
<-- Not perfectly aligned
</p>
Notice that the element isn't perfectly centered... why is this? Is this a browser off-by-one issue? It repros on WebKit browsers (Chrome, Safari).
vertical-align: middle; was never meant to center the element. Here is a more trivial example to better see:
p {
background:
linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */
red;
line-height: 80px;
font-size:80px;
display: block;
}
span {
height: 18px;
width: 18px;
display: inline-block;
background: lightblue;
vertical-align: middle;
}
<p>
<span></span>
<-- Not aligned
</p>
Aligns the middle of the element with the baseline plus half the x-height of the parent ref
Related question for more details:
How to understand the difference between vertical-align: -0.125em and vertical-align: middle?
Vertical align not working on inline-block
Vertical-align aligns everything else except self
https://stackoverflow.com/a/54190413/8620333
Your code has comments and text is not in span.
Try this:
<p>
<span>Not perfectly aligned</span>
</p>
p {
background: red;
}
span {
display: inline-block;
background: lightblue;
vertical-align: top;
}
How do I align images inside a nav tag and push them to the edges of the nav element?
From what I've found researching I am trying to use vertical-align: middle and float but they have no effect on displaying the elements.
Codepen: https://codepen.io/centem/pen/BaajLZm
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
you don't need vertical-align. The "nav" element have "display: flex;".
so set "align-items: center;" into css of "nav" element.
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: rgb(67, 66, 66);}
I have 2 divs (in a wrapper) that I am using to display a photograph and the title of the photograph side by side and vertical-align as middle.
The issue that I am having is that when I attempt to float the photograph to the right and float the title to the left, the title and photograph are no longer vertical-aligned as middle.
It seems that when I use float, the vertical-align becomes top.
How do I add the floats and keep the vertical-align as middle? I have spent 2 hours trying all I know. I hope someone can point out what I have done wrong.
Here is my code:
<div class="live_preview_top_header_wrapper">
<div class="live_preview_top_header_title">Title</div>
<div class="live_preview_top_header_photograph">
<img id="id_name_details_photograph_01_live_preview" src="{{ name_details_photograph_url }}" />
</div>
</div>
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
vertical-align: top;
}
.live_preview_top_header_title {
display: inline-block;
background-color: #aaaaff;
vertical-align: middle;
float: left;
}
.live_preview_top_header_photograph {
display: inline-block;
background-color: #cc0033;
vertical-align: middle;
float: right;
}
Try centering with Line-Height in the parent Div, and using vertical-align: middle; on the content eg image and title.
Example
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}
.live_preview_top_header_photograph {
display: inline-block;
background-color: #cc0033;
float: right;
line-height: 200px;
}
.live_preview_top_header_photograph img {
vertical-align: middle;
}
I have two DIVs inside a parent div. I want them to be:
So I searched for examples of this because it is such a trivial problem. I tried a few examples from SO but it didn't seem to make any difference for my example. I tried vertical-align: middle; and inline-block but without any success. Here is my fiddle.
http://jsfiddle.net/Sz2fU/1/
HTML
Play A
CSS
.parentBox
{
height: 100px;
}
.left_box
{
display: inline-block;
vertical-align: middle;
background:green;
float:left;
}
.right_box
{
width: 18%;
height: 100%;
display: inline-block;
vertical-align: middle;
background:blue;
float:right;
}
.inputBox
{
height:80px;
}
In order for vertical-align to work in a table we will have to use table-cell
Try this:
Add display:table; and width:100%; to .parentBox
Remove float from .left_box and .right_box
Add display: table-cell; and text-align:center; to .left_box and .right_box
You needed to add text-align:center; to center the input to the middle.
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.
JSFiddle: DEMO
.parentBox {
width: 100%;
height: 100px;
border: 1px solid lime;
display: table;
}
.left_box,
.right_box {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.left_box {
background:green;
}
.right_box {
width: 18%;
height: 100%;
background:blue;
}
.inputBox {
height:80px;
}
Add line-height: 100px to the parent div. Vertical-align:middle refers to line-height, so setting it up to the height of the block will do the job. Just don't forget to reset line-height to normal on children (otherwise, they will be with line-height: 100px too and if text in it more than one line you get huge block).
I want to vertical centralize the "red" square with text. I have some inner <a> inside the div, doens't know if this affect something... The css below works, but seems to have too much vertical-align: middle; in every single tag. Someone know how to make this more simple with the same html tree? Thanks!
Html:
<div>
</div>
<span>Testing...</span>
Css:
div{
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
a{
width: 5px;
height: 5px;
background-color: red;
display: block;
vertical-align: middle;
}
span{
font-size: 26px;
vertical-align: middle;
}
http://jsfiddle.net/sGgZb/6/
Only the span needs the vertical-align rule.
span{
font-size: 26px;
vertical-align: middle;
}
jsFiddle example
Use pseudo-elements since this is a purely stylistic enhancement. No additional markup is required, and your CSS is cleaner.
HTML:
<span>Testing...</span>
CSS:
span {
font-size: 26px;
padding: 0 0 0 10px;
}
span::before {
content: " ";
width: 5px;
height: 5px;
display: inline-block;
background: #f00;
vertical-align: middle;
}
jsFiddle example
If all you're trying to accomplish is to not use as many vertical aligns, then I accomplished the same effect without the container div and putting inline-block on the a itself.
http://jsfiddle.net/sGgZb/19/