This question already has answers here:
How to center text vertically with a large font-awesome icon?
(15 answers)
How to vertically align text with icon font?
(10 answers)
Closed 4 years ago.
I am trying to put a tag within a button next to the label text.
I want the two to line up, but when I do that the text seems to go down, to the bottom of the button instead of in the middle.
I tried setting the line height: and also vertical align: middle, but neither seem to work. Does anyone know the fix?
Here is what I tried:
HTML
<button class='btn'>
<span>Label</span>
<i class="material-icons right">search</i>
</button>
CSS
.btn {
background-color: black;
color: white;
text-transform: uppercase;
padding: 0 15px 0 15px;
height: 40px;
}
.btn span {
line-height: 40px;
vertical-align: middle;
padding-right: 10px;
}
.btn i {
line-height: 40px;
}
Here is a fiddle:
https://jsfiddle.net/0jy6zh75/9/
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Want to move a particular div to right
(4 answers)
Closed 2 years ago.
As you can see in the snippet below, I have some text in the <p> element, now let's say the <p> text changes (in the front-end) to something different like 'The night is dark, cold, chilly' for example with different width, how can I get the box to be responsive? So keeping the same padding all around the text? I've right now placed it there using margin-left: 55%;
.full {
width: 500px;
height: 400px;
background-color: grey;
}
p {
text-transform: uppercase;
text-align: right;
background-color: green;
color: white;
margin-left: 55%; /* THIS HAS TO edited out? */
padding: 15px;
}
<div class="full">
<p>The woods are green</p>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to draw a circle with text in the middle?
(19 answers)
Closed 2 years ago.
So I am trying to make a single big number like 99 display on a big circle
I've read this and used its code, but the number is not aligned in the exact middle.
here's what I have so far:
.circle {
width: 300px;
height: 300px;
margin-top: 20px;
margin-left: 20px;
border-radius: 50%;
font-size: 200px;
color: #fff;
line-height: 500px;
text-align: center;
background: #000;
}
<div class="circle" id="date">99</div>
You're setting the line height to be more than the area height.
line-height: 300px;
Demo
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Inline-block line-wrap extra space
(4 answers)
Closed 5 years ago.
I need:
I have:
So, "exchequer" word was wrapped, however it left pretty wide space in spite of orange div is inline-block. CSS:
.BlockContainer{
background: blue;
width: 400px;
}
.InlineBlock {
display: inline-block;
background: teal;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
color: #f5511e;
padding: 2px 4px;
}
<div class="BlockContainer">
<div class="InlineBlock">
Dumpy kibitzer jingles as exchequer overflows.
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
The whole div remains on left, I tried withe below but no luck
.captionhome {
width: 600px;
padding: 10px;
border: 5px solid black;
margin: 50px;
font-weight: bold;
font-size: 16px;
text-align: center;
}
<div class="captionhome" style="text-align: center;">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</div>
Your captionhome has a set width. Either change that to 100% or add
margin: 0 auto;
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 8 years ago.
This is my code:
#homeButtonText{
font-size: 25px;
text-align: center;
}
Here's how it looks:
How do I get the text on the inside to be right in the center.
I have tried,
vertical-align: middle;
with no success. Any help is appreciated!
have you set height to your div? You can use line-height
Check this here: demo
Solutions:
FIRST - QUICKEST:
set line-height:(button height) to the #homeButtonText
SECOND - RECOMMENDED
use padding, like this:
padding:10px 20px;
so the text will be in center and you will have full control
You could use display: table-cell and vertical-align: middle
.button {
background: #DDDDDD;
width: 200px;
height: 80px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #000000;
}
<div class="button">Home
</div>
Have you tried positioning the text absolutely inside the div?
Something like:
top:50%;
left:50%;