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; }
Related
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 11 months ago.
I have a block with inline divs wrapping inside.
I want to center that block inside it's container using margin auto (or any other ways).
Unfortunately it doesn't work.
There is a solution by using text-align center, but i don't want the inline-divs in the last line to be in the center.
or in other words:
how to get rid of the yellow marked space?
There was a similar question 6 years ago that didn't get a good solution, I ask again because css has advanced since then
span{
display:inline-block;
width:150px;
height:100px;
background-color:red;
margin:10px;
}
.inside{
margin:auto;
width:90%;
background-color:blue;
}
.outside{
border:solid 1px black;
}
<div class="outside">
<div class="inside">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
```
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
CSS center display inline block?
(9 answers)
Centering in CSS Grid
(9 answers)
Closed 2 years ago.
I have made a really simple calculator, but it being on the top right of the screen makes it look weird. Vertical-align does not work and text-align only works for the text box. How do i make all the buttons centered in the screen???
I put all of the buttons and stuff inside a div called main. How do i center that div vertically and horizontally?
I could manually position it by giving some px values to the left and top but it would not work different screens. I want to make it in a way that it remains centered in a huge variety of screens.
You can easily do this with flex-box features.
try this:
display: flex;
align-items: center;
justify-content: center;
U can do it by flex
display:flex;
align-items:center;
Justify-content:center;
Or
display:inline-block;
margin: auto;
It will do.
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.
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>
This question already has answers here:
css single or multiple line vertical align
(8 answers)
Closed 8 years ago.
Please note the attached image/wireframe. How can I build this element with CSS. Where if there is one line of text it is vertically centered but also support 2 lines also being vertically centered?
You can accomplish this by making your wrapper div display:table: and your inner text div display:table-cell. See example below:
HTML:
<div class="wrapper">
<div class="inner">
One Line</br>
Two Line</br>
Three Line</br>
</div>
</div>
CSS:
.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}
.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}
FIDDLE:
http://jsfiddle.net/pgwL47oy/1/
This is already mentioned in a comment on your question, but usually the usage of display: table-cell; with vertical-align: middle; is what you're after.
The idea is to get the parent container to be displayed as a table with display: table;, and then the span or paragraph element you're using to contain those text nodes is given the above table-cell display with vertical-align.
It's worked for me before, should be worth a shot!
Here's a CSS Tricks article that could help you out further
Hope that helps! :)