How to Vertically Align Text Next to a Floated Image

how to vertically align text next to a floated image?

First remove float from it. Write like this:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Check this http://jsfiddle.net/ws3Uf/

how to vertically align a floated image

You can try moving the logo into the navbar div like this:

'<div class="container">
    <div id="navbar">
       <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt="Sample Image"/></a>
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>'

And change the CSS like this:

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

Vertical Align Text to a Floated Image that is on the Left

Realize it's an old question but...

In CSS one can use a ::before element add a negative margin-top value to it.

Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.

The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.

In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.

How do I center text next to a floating image using css?

http://jsfiddle.net/dxbbog2k/

img {    vertical-align: middle;    width: 300px}
h2{    display: inline;}
p{    clear:both;    display: block;}

<img id="img" src="http://dreamatico.com/data_images/kitten/kitten-3.jpg"><h2> Text that should be next to the image. </h2>
<p>Text that should be below the image and heading.</p>

Vertically align text right of floated image, image sizes varied, responsive

This will get you started: jsFiddle example - look below for a better method.

Basically, vertical-align:middle and display:inline-block are used on both the p and the img elements for centering.

HTML

<div class="element">
    <img src="http://placehold.it/150x150"/>
    <p>Lorem Ipsum is simply dummy text </p>
</div>

CSS

.element {
    background:rgb(134, 226, 255);
    margin:10px;
}
p {
    display:inline-block;
    margin:0px;
    width:70%;
    background:white;
    vertical-align:middle;
}
img {
    display:inline-block;
    vertical-align:middle;
}

---

Here is better approach using display:table/display:table-cell Same HTML..

jsFiddle example - semi-responsive... Other jsFiddle example - responsive img elements..

CSS

.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}

---

Yet another update using media queries

You could obviously use whatever breakpoints you want. I use 480px, as this is just for example purposes. Try resizing the window. jsFiddle example

CSS

@media only screen and (min-width: 480px) {
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}
}
@media only screen and (max-width: 479px) {
.element {
    width:100%;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    background:white;
}
img {
    width:50%;
    margin:0px auto;
    display:block;
    height:auto;
}
}

Vertical align text along side image

wrap your image and text in div .container, and set the rules for flex and align-item center.

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

.image {
   width: 58%;
   padding-top: 60%;
   margin-right: 2%;
   position: relative;
   float: left;
   position: relative;
   background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
.textcontainer {
    width: 40%;
    position: relative;
    float: left;
 }

<div class="container">
  <div class="image">
    </div>
  <div class="textcontainer">
  Some text which i would like centred
    </div> 
</div> 

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/

Vertical alignment of image and text, while centering text and floating image to the left

A solution that seems to work with float (at least in chrome)

<div class="container">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="text">this is some text</div>
</div>

* {
box-sizing: border-box;
}
.container {
width: 100%;
text-align: center;
border: 1px solid red;
display: table;
}

img {
float: left;
}

.text {
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
height: 100%;
}

fiddle: http://jsfiddle.net/u7cjLL1f/

If you would like the text to take up the entire parent div and go over the image: http://jsfiddle.net/u7cjLL1f/1/

---

Related Topics