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>
How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
How to vertically align both image and text in a DIV using CSS?
Give both the image and the text a vertical-align: middle - the text needs to be contained in an element that is also display: inline. So markup like this:
<div>
<span><img src="blah.jpg" /></span>
<span>text text text</span>
</div>
div {
display: table;
}
img {
vertical-align: middle;
display: table-cell;
}
span {
vertical-align: middle;
display: table-cell;
}
should work. Here's a jsfiddle to demonstrate (edited fiddle to show everything is vertically aligned within a container as well.)
EDIT: to get the behavior you want, I recommend using additional display properties - table for the container and table-cell for the contained elements. Fiddle link has been updated with the changes.
EDIT: the only way I could think of to get it to work was to wrap the image in another inline container, in this case a span. I've updated the fiddle to demonstrate.
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 vertically align both text and image middle of div?
You can add vertical-align:middle
to your #titleimage span
#titleimage{
background: red;
display: inline-block;
}
#titleimage a{
text-decoration: none;
}
#titleimage img{
width: 33px;
height: 36px;
vertical-align: middle;
}
#titleimage span{
color: white;
font-family: sans-serif;
font-size: 26px;
vertical-align:middle;
}
Align an image div in the vertical center of a text div next to it
You will need to remove the float and use a wrapper instead: https://jsfiddle.net/qhf8Lczg/1/
.mcnTextContent { position: relative !important; margin: 0 !important; padding: 0 !important;}
.mcnTextContent { position: relative; left: 0px; padding: 10px !important;}
.mcnTextBlockOuter { padding: 0px !important;}
.mcnTextBlockInner { padding: 0px !important; background-color: white;}
.positionr { position: relative !important; display: flex; justify-content: space-between;}
.textcolumn { display: inline-block; width: 370px; height: auto !important; border: 1px solid red;}
.textcolumn h1 { text-transform: uppercase; color: black !important; font-family: "Arial" !important; font-weight: initial;}
.textcolumn p { font-family: "Arial" !important; font-size: 14px !important; color: black !important;}
.imagecolumn { display: inline-block; border: 1px solid blue;}
.imagecolumn img { padding-left: 15px; padding-top: 10px;}
.img-wrapper { position: relative; top: 50%; transform: translateY(-50%);}
<div class="positionr"> <div class="textcolumn"> <h1>Header</h1> <p>Lorem ipsum dolor sit amet, an doming bonorum pri, ferri oratio malorum pro et, per tritani phaedrum consulatu in. Vix ei persius assentior, omnes volumus pri id. Eos odio altera dictas no. Erat omnium nominati vix eu, sit et commune pertinacia. Id laudem officiis referrentur vix.</p> </div> <div class="imagecolumn"> <div class="img-wrapper"> <img src="http://via.placeholder.com/50x50" /> <img src="http://via.placeholder.com/50x50" /><br /> <img src="http://via.placeholder.com/50x50" /> <img src="http://via.placeholder.com/50x50" /> </div> </div></div>
Align image and text properly in HTML
Use vertical-align
on the img
since it's adjacent inline content.
img { vertical-align: middle;}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb
Align an image and text vertically in the middle?
JSFIDDLE
.vertical-align{ vertical-align: middle;}img{ border:3px solid #2d2d2d;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div className="hidden-md"> <div className="row navbar"> <div className="col-xs-2 col-sm-4 text-center"> <img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" /> <span className="custom-input vertical-align">Filters</span> </div> </div>
Related Topics
How May I Align Text to The Left and Text to The Right in The Same Line
How to Make a Text Input Non-Editable
Floated Child Elements: Overflow:Hidden or Clear:Both
Which Inline HTML Styles Does Github Markdown Accept
HTML Input Range Step as an Array of Values
Viewport Meta Tags Vs Media Queries
Pseudo Elements Breaking Justify-Content: Space-Between in Flexbox Layout
CSS Attribute Selector for Input Type="Button" Not Working on Ie7
How to Select Every Other Div Class Element Using Just CSS (No Js)
Chrome Slow Scrolling with Fixed Position Elements
How to Make <Input Type="File"/> Accept Only These Types
How to Vertical Align an Inline-Block in a Line of Text
Setting a Div's Height in HTML with CSS
How to Construct a Table Header Than Spans Multiple Rows in HTML