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);}
Related
In have a js-fiddel here - https://jsfiddle.net/zhfs7hxq/
Very simple I have text within a div with text within a span within that div.
I need to vertically center the the span of text against the larger text within the div.
vertical-align: middle; moves it slightly but doesn't center it.
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name-inner{
display: inline;
font-size: 20px;
vertical-align: middle;
}
In your code is vertical aligned by the line-height, that's how it works. If you need to center perfectly you can position absolute the element. I modify your fiddle to achieve it:
https://jsfiddle.net/zhfs7hxq/1/
In the first yellow block targets your code.
My modifications is in the second yellow block:
.name{
margin: 10px;
position:relative;
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name.other .name-inner{
position: absolute;
display:inline-block;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
}
Good luck
If you can use flex box, try this JSFIDDLE: https://jsfiddle.net/zhfs7hxq/2/
Note that vertical-align works only on table-cell and inline-level elements.
Flex box solution
Add this to .name to set its display to flex:
.name {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
And to .name-inner add the following to align vertically centered:
.name-inner {
-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
align-self: center;
}
There's a line-height for your code. Try making the line-heights identical:
line-height: 45px;
Snippet
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
line-height: 40px;
}
.name-inner{
font-size: 20px;
vertical-align: middle;
line-height: 45px;
}
<div class="name">Heading one <span class="name-inner">Heading insert</span></div>
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;
}
This is driving me crazy I just don't understand why this piece of simple css to vertically center an element in a div doesn't work as expected.
this is the html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
the inner element does not get centered vertically but I really think it should
here is an html with the two elements:
http://alephz.com/test.html
and this is the CRAZY part. here is a jsfiddle with the same html and over there it works! tested on the same chrome/win7!
http://jsfiddle.net/pkrsdqkb/
Very weird, but if you want to solve it, you add to 'a':
position: relative;
top: 50%;
transform: translateY(-50%);
Remove
vertical-align: middle;
float: none;
One option to play nicely with vertical-align: middle is to use display: table and display: table-cell.
The wrapper gets display: table and width: 100%
Wrap the links in a div which will act as a "table cell" with display: table-cell
vertical-align: middle will now work as you expect it to.
Compatibility: display: table is good for IE 8 + and modern browsers everywhere.
Example:
.header-a-wrapper {
background: red;
display: table;
text-align: center;
height: 100px;
width: 100%;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
background: blue;
display: block;
margin: 2px 0;
}
<div class="header-a-wrapper">
<div class="vertical">
medical salamander
medical salamander
</div>
</div>
Old answer
There is a lot of redundant CSS.
The vertical center is applied through: line-height: 48px.
Leave that on the wrapper and remove all the positioning CSS properties on a.right.
Example:
.header-a-wrapper {
line-height: 48px;
background: red;
display: block;
text-align: center;
}
.right {
background: blue;
}
<div class="header-a-wrapper">
medical salamander
</div>
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.
I am trying to vertical align texts in my div.
I have something like
<div id='div'>
<h1>test here</h1>
</div>
#div{
float: left;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
vertical-align: middle;
}
#div h1{
height: 180px;
line-height: 180px;
vertical-align:middle;
font:normal 0.9em proxima-reg;
}
I can't seem to vertical align the h1 tag texts inside my div. My brain is fried now and I was hoping someone can help me out. Thanks in advance.
Here is one way of doing it:
#div {
float: left;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
background-color: yellow;
}
#div h1 {
vertical-align: middle;
font:normal 0.9em proxima-reg;
outline: 1px dotted blue;
display: inline-block;
}
See: http://jsfiddle.net/audetwebdesign/sUzK9/
Your #div has well defined dimensions, which makes things easier.
I applied display: inline-block to the h1 and removed any height/line-height values,
and it seems to work.
vertical-align is meant more for table cells than it is for "non-inline" DIV elements.
Give your DIV a fixed width and height, and then try using margin: auto 0px; to vertically align it.
Or...
Give your DIV a top and bottom padding.
Either way, you'll need to text-align your text to center.
Try this (http://jsfiddle.net/myajouri/zyB6C/):
#div{
float: left;
display: table-cell;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
vertical-align: middle;
background-color: red;
}
#div h1{
display: inline-block;
vertical-align: middle;
font:normal 0.9em proxima-reg;
background-color: green;
}