HTML List Isn't Vertically Aligned When Using Floating Images

Why doesn't vertical-align work properly when using float in CSS?

You need to set line-height.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

How to get float:right button to vertically align in the middle

The cleanest way to do that is to use flex like this:

1. Add display: flex to your outer div panel-footer [Check code below]

2. Remove the float and use text-align:right on the span for the button. [Check code below]

3. Add align-self: center to the inner span. [Check code below]

---

For 1:

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

For 2:

.header-footer-item {
        text-align: right;
}

For 3:

.header-footer-item {
    align-self: center;
}

jsFiddle: https://jsfiddle.net/d1vrqkn9/4/

How to vertically align a DIV next to an image?

Use display: inline-block.

#details { 
    display: inline-block; 
    vertical-align:middle;
    border:solid black 1px; 
    width: 300px; 
 } 
.photo { 
   display: inline-block; 
   vertical-align:middle;
   width: 300px; 
   height: 300px; 
   border: 1px solid #d1c7ac; 
}

Vertically center a floating div

You can use position absolute (with left / right depending on what floats you need)

 .selector{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
 }

http://codepen.io/sebastianekstrom/pen/kzEhe

How to vertically align image

You can vertically center your image by using translateY(). Give your container a position: relative; and then assign position: absolute; along with transform: translateY(-50%); to your image.

CSS

.imgholder{
  width: 100%;
  height: 100%;
  position: relative;
}

#stackimg{
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

CodePen

Why is vertical-align: middle not working on my span or div?

Using CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
}

use "justify-content: center;" to align elements horizontally

Note: This might not work in old IE's

How to force a list to be vertical using html css

Try putting display: block in the <li> tags instead of the <ul>

To align the same image to left, floating with the text in monitor screen, and to center, away from the text in mobile screen. How?

For what your attempting you could change the styling if its under 600px and for anything over then use @media(min-width:600px) for larger sizes.

@media(max-width:599px){//smaller than 600px
   img{
    height: 40%;
    width: 40%;
    float:left;
   }
}

@media(min-width:600px){}//600px and bigger

what you have is your using max-width:600px so that would apply for everything under or equal to 600px. If you want it to apply to 600px and above use min-width:600px.

If all you want is to have the image to push the text down under it all the time and take up the center of the screen all the time no matter what the screen size is then just do the following.

#myImageId{
   display:block;
   margin:2px auto 2px auto;
}

There is an infant ways to target an element for styling. If the element has an id you can target the id as followed.

#this_is_my_img_id{
//great things are going to happen
}

or you can target a class

.my_cool_img_class{
//just the facts
}

or an attribute

<img coolPic="true"/>

img[coolPic]{}

or

img[coolPic=true]{}

or you can select it based on its location

<div id="myCoolPost">
   <img />
   <img />
</div>

#myCoolPost img:nth-child(2){}

you can also combine them all together along with traversing the dom

#myCoolPost .centerBlock:nth-child(2) img[hasCoolFactor]{}

vertical align image and text in div

If you use display: inline-block and use vertical-align: middle on your container divs the content will be vertically aligned correctly.

Fiddle Here

.social-cont2,
.social-cont1{display: inline-block; vertical-align: middle;}

Edit: Fiddle using table-cell instead

EDIT: Fiddle with valid image files

How to vertical align links and image inside ul li

Using flex and align-items is a good way for vertical alignment control.
More information: https://www.w3schools.com/cssref/css3_pr_align-items.asp

Also margin: auto is useful to separate items in the flex.

JSX code:

<header className="header">
    <div className="main-menu">
        <ul>
            <li className="main-menu__app-menu"><Link href="#"><a>Link A</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link B</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link C</a></Link></li>

            <li className="main-menu__user-menu main-menu__user-image">
                <img class="main-menu__user-image__image" src="">
            </li>            
            <li className="main-menu__user-menu"><Link href="#"><a>Link E</a></Link></li>
            <li className="main-menu__user-menu"><Link href="#"><a>Link D</a></Link></li>
        </ul>
    </div>
</header>

Sass code:

.main-menu {

  & > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;

    & > li {
      display: block;

      & > a {
        display: block;

        text-align: center;
        padding: 0 1.4rem 0rem 1.4rem;
        color: $link-color;
        text-decoration: none;

        &:hover {
          color: $link-hover-color;
        }
      }
    }
  }

  &__app-menu {
    
  }

  &__user-menu {
    border: 1px solid #000000;
    border-radius: 1.5rem;
    margin: 0 .1rem;
  }

  &__user-image {
    margin-left: auto;

    &__image {
      border-radius: 50%;
      cursor: pointer;
    }
  }

}

---

Related Topics