Vertically Align Text Next to an Image

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

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 do I vertical center text next to an image in html/css?

This might get you started.

I always fall back on this solution. Not too hack-ish and gets the job done.

EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.

<div>    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>    <span style="vertical-align: middle;">Here is some text.</span></div>

How to vertically align text next to an image in outlook

Email client compatibility is like cross-browser compatibility on a steroid induced rampage. I would suggest going old school with a TABLE to achieve the effect you want. Dated HTML practices tend to fare well in email clients.

<table>  <tbody>    <tr>      <td>        <img src="http://via.placeholder.com/150" />      </td>      <td>Hello world!</td>    </tr>  </tbody></table>

How to vertically center text next to image?

You've got vertical-align: top in there; what you want is vertical-align: middle, on both the link and the image it's supposed to sit next to.

.section_content {    width: 400px;}
.section_content > ul > li > img {    width: 40px;    height: 40px;    padding: 5px;}
.section_content > ul > li > a,.section_content > ul > li img {    vertical-align: middle;}
.section_content > ul > li {    list-style-type: none;}
.section_content > ul {    list-style-type: none;
    padding-top: 45px;    padding-left: 5px;}

<div class="section_content">        <ul>            <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>            <li>GitHUb</li>        </ul>    </div>

Vertically align text next to image

You have options for this, but one of them is using flex:

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body{margin: 10px;}
img{float:left;margin-right:20px}.col-sm-4 > div {  display: flex;  align-items: center;}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="col-sm-4"><div>    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff">    <h2>        Short title    </h2>    </div></div>
<div class="col-sm-4"><div>    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff">    <h2>        A longer title    </h2>    </div></div>

CSS vertical-align text input field with adjacent text

The default setting for vertical-align is indeed "baseline", and it also works that way in your example. What you are forgetting is that the baseline alignment doesn't align the bottom borderline of the input box, but the baseline of the text that is inside that box. If you write something in there, you'll see it. (BTW, it's the same if you create a div with a border and text inside it.)

In the following snippet (which is almost identical to your code except that the alignment is not defined , i.e. default, i.e. "baseline") I added a value text to the input tag, so here you see the baseline alignment.

h1,
form,
div.search {
  display: inline;
}

<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <h1>Heading</h1>
  <form>
    <div class="search">
      <input type="text" id="search_string" value="here's some text" />
      <input type="radio" id="option" />
      <label for="option">Some option</label>
    </div>
  </form>
</body>

</html>

Vertically Align Text Next to an Image