This question already has answers here:
Vertically align text next to an image?
(26 answers)
vertical align middle in <div>
(11 answers)
Closed 5 years ago.
Logo and image on the same row.But padding top only the issue.Check the fiddle.
http://jsfiddle.net/6Rpkh/443/
<img class='likeordislike' src='image'><h4 class='liketext'>Twitter</h4>
The issue is the text below the image. So I want to place into the middle of the image. Padding style not working on that
First note that your image class is likeordislike, yet your selector is likeordisklike (with an extra k), so it will never apply. You'll also want to remove the width from it (to prevent stretching), and give it a taller height.
Now that the image is sorted, the text can be vertically aligned to the middle by:
Giving it display: inline-block
Setting the height equal to the height you're trying to align with
Setting vertical-align: middle
This can be seen in the following:
img.likeordislike {
height: 50px;
margin-right: 4px;
}
h4.liketext {
color: #F00;
display: inline-block;
height: 50px;
vertical-align: middle;
}
<img class='likeordislike' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAjCAMAAAA3znPYAAAAXVBMVEVVrO7///9yuvHu9/36/P5st/Dm8/1br+/K5fp3vfGQyfSFw/OazvXX6/tmtPD1+v6m0/bg8PyUy/Ss1/fQ6Pq43PjE4vnF4/me0PWm1Pa93/h1vPGJxfPk8vzZ7PuSFyAkAAABYElEQVQ4jYXU67aCIBAFYIY7qKhJZZq+/2Mejzdk0Nw/WivXZ+6mCQLXKbVRtGOHK+TS8sYoQojqq9mzpl50WbEUy4xsoQUvPo6Wi/bEcoxZT0KcmV7qtUlFUm5JHFfAWMz6O73L4jIe4+ZlvnLWc0PhjzpHWiki5NJkfWouw+wowemHtXezP27z0mG8NP3XdaiX+3KeCNZqDL/OcQD08fSDxE2UD5oJNAGhsC42zTUbTPKt0P31rnvR5vjDUATbm+DhnsTArvW9zoPm/a1+Bw3+pjVx7KChu9EWjhp0uhjH6FgD636MnPJYf2z7Q3cQa7z9UQxHGtprvO7IUXP8RwypINFT9YuhZ3CmoW5Nn95BL88q3iSaSrjQ4yPBJsJBM23TGhYdeQTYq9NdY0VCiXsCYM3f5zuiconxst/6m5wfIh8Tu/ceng/j1t5KZO3r5IyOZlLWnRXKmdbL5Hze8gfIkQ1q4RZTDwAAAABJRU5ErkJggg=='>
<h4 class='liketext'>Twitter</h4>
Related
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Vertically-aligned inline-block element not perfectly centered within container
(2 answers)
Closed 6 months ago.
I have a div that contains an image and text. I'm trying to simply vertically align the text.
I've tried setting vertical-align: center; and line-height:90px, but neither seem to be having any effect.
If I remove the image, even just line-height:90px does the job, so I suspect it's something to do with the image affecting the baseline of the div.
If possible I'd prefer solutions without flexbox.
My code:
.menubuttons{
height:90px;
background-color: red;
font-size:30px;
/*my unsuccessful attempt at centering the text vertically*/
vertical-align: middle;
line-height:90px;
}
.menubuttons img{
height:50px;
margin:20px;
}
<div class="menubuttons"><img src='https://cdn-icons-png.flaticon.com/512/2111/2111806.png'/>Stack Overflow</div>
jsfiddle in case SO code snippet isn't added
Just add these two properties in .menubuttons
.menubuttons{ display:flex; align-items:center; }
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I feel like such a newb asking this, but I can't figure out why any div container seems to always be taller than the content that it contains. See https://codepen.io/grayayer/pen/XWjBJWZ for working example.
.container {
background-color:red;
height: fit-content;
width: fit-content;
padding: 0;
}
<div class="container">
<img src="https://via.placeholder.com/350" height="350" width="350">
</div>
It's like there's always 5px of padding on the bottom, even though I've specifically said not to.
Images are rendered inline by default, so that space at the bottom is accommodating text decenders. You can set display: block; on the image to remove the space.
More information in this answer.
This question already has answers here:
Vertical-align with baseline and textareas
(3 answers)
textarea placement is wonky
(2 answers)
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
I know that elements with display: inline-block with display: value-other-than-visible (can) make the baseline of their parent position at the bottom of the inline-block's hpbm (height, padding, border, margin).
Why does text-area seem to produce the same effect? I know most user-agents make it inline-block.
For example:
textarea {
height: 100px;
}
I am text.
<span>I am a span.</span>
<textarea></textarea>
div {
display: inline-block;
height: 100px;
}
I am text.
<span>I am a span.</span>
<div>I am an inline-block</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 3 years ago.
I have 3 divs placed side by side. When I'm trying to put a header (or any element) inside of the middle div (or any div), that div floats way down. Why does it do that?
CSS I used for divs:
div {
display: inline-block;
background-color: lightgray;
height: 600px;
width: 300px;
}
Add *{box-sizing:border-box} to your CSS. It defines how the width and height of an element are calculated.
This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Put text at bottom of div
(5 answers)
CSS Text Align Bottom of Container
(4 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I have a div (with fixed height) with this CSS:
.div {
color: white;
font-family: Bahnschrift;
text-align: justify;
vertical-align: text-top;
}
As you can see, in this div there are paragraphs vertical aligned at the top. I want to align only the last paragraph (class="lastpar") at the bottom of the div, this is the CSS:
.lastpar {
position: relative;
vertical-align: text-bottom;
}
But it doesn't work, could you please help me to align it at the bottom of the div? Thanks
Vertical-align is not intended for aligning block elements.
Use flexbox for this
apply the following rule to the parent
div {
display: flex;
justify-content: flex-end;
}
then in another div wrap all elements but the paragraph you want to remain at bottom, and you're all set.