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%;
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm trying to do a navigation bar in CSS with two buttons on the left side and one image on the right. The problem is that my image has to fit the size of the navigation bar, and at the same time, it has to be vertically centered. If anyone could help me solve this, I would be truly glad.
Solution: I ended up solving it by using "flex" and "margin" (the navigation bar display property was set to flex and the icon margin-left was set to auto, making it go to the right of the flex row). Here is a code example: https://jsfiddle.net/572bag0z/#&togetherjs=QJn2LqjxTQ
.top-nav {
position: fixed;
display: flex;
overflow: hidden;
background-color: white;
align-items: center;
height: 4em;
width: 100%;
box-shadow: 0 .5px 4px;
}
.top-nav a {
float: left;
color: #f2f2f2;
text-align: center;
text-decoration: none;
color: black;
text-transform: uppercase;
font-weight: 600;
padding: 2em;
}
.top-nav img {
width: 3em;
margin-left: auto;
margin-right: .75em;
}
Generally and historically, centering elements along the vertical axis has been a pain. Things have gotten much better though, and now there are some pretty easy ways to about it. I'd recommend looking into using flexbox's align-items property.
I think the easiest way of doing this is adding
margin-top:auto; margin-botom:auto; to the img and display:flex; or display: grid; to the container. It wouldn't work without flex or grid.
Codepen: https://codepen.io/thescv/pen/YzqrLeK
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I have two different paragraph tags, each with a different size. The problem is that I want the two texts to move to the center of the text line, so they appear even. Below is my current code, and images of desired results. Note that these are separate tags, using display: inline to make the appear next to each other.
Example of current code
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
}
<p class="big">Test</p>
<p class="small">Test</p>
Desired Result
Current Result
Wrap it in a container element and give vertical-align: middle; like this
.container p {
display: inline;
vertical-align: middle;
}
.big {
font-size: 42px;
}
.small {
font-size: 12px;
}
<div class="container">
<p class="big">Test</p>
<p class="small">Test</p>
</div>
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
position: absolute;
padding: 8px 8px;
}
well while providing absolute positioning to the text of the .small class the position of the text moves to top
this might help you, also you can change the padding of according to the font-size
Set width to the text-box as you want. As I used display-block. You have to set display: inline-block to set the width of the text-box.
.text-box {
display: block;
text-align: center;
}
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
}
<div class="text-box">
<p class="big">Test</p>
<p class="small">Test</p>
</div>
This question already has answers here:
How can I make a fieldset legend-style "background line" on heading text?
(9 answers)
Closed 5 years ago.
I have h3 and would like to have a line before/left and after/right DAY-BY-DAY word, but can only achieve line on the top and at the bottom of that word with ::after and ::before. How can I achieve this with flex, please help.
Something like ----DAY-BY-DAY----
Here is html:
<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`
Here is CSS:
#daybyday::before {
content: "";
display: block;
background: salmon;
height: 5px;
}
#daybyday::after {
content: "";
display: block;
background: salmon;
height: 5px;
}
Do you want something like this?
So what we do here is, we create a div with color: salmon and height of 5px, then we set the flex property for the element using display:flex, by using flex property (align-items:center -> for vertical centering and justify-content:center -> for horizontal centering, we can get the h3 element in the center of the line, finally to prevent the div which is behind the h3 element from being visible, I set the background-color:white, so that it is not visible!
#daybyday {
display: inline;
background-color:white;
}
.text-special {
font-style: italic;
font-size: 23px;
color: #7B7B7A;
}
.line {
background-color: salmon;
height: 5px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
<div class="line">
<h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
<div>
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?
#chooseStateAlabama {
width: 20%;
height: 25%;
top: 0;
left: 0;
position: absolute;
background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
background-size: 100% 200%;
float: left;
color: #FFFFFF;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 50%;
line-height: 25%;
text-align: center;
vertical-align: middle;
}
You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO
#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior
If you can alter the markup you can use quite a few ways to get the result you want.
http://jsfiddle.net/vvpn6cge/
Because you have text ( that could be one or many lines long I guess) then you could get the result using CSS table cells (see the fiddle).
.outer-container {
display: table;
width: 100%;
}
.txt-vertical-align {
display: table-cell;
text-align: center;
vertical-align: middle;
}
As a further alternative, you might use flexbox
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
(stolen from this stackoverflow question)
http://jsfiddle.net/L85h8vvj/7/
HTML
<body>
<div class='container4'>
<div>Example :)</div>
</div>
</body>
CSS
body{
margin:0px;
}
div.container4 {
height: 100%;
width:100%;
position: absolute;
}
div.container4 div {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%)
}
This question already has answers here:
Why is vertical-align: middle not working on my span or div?
(19 answers)
Closed 9 years ago.
Here is my code.
I have added the vertical-align property for the spans in the div with ed_button class but the third, fourth and the fifth boxes are displaying the spans at top positions not in the middle.
Am I doing anything wrong here?
You need to give the outer-div display: table. And float: left will fulfill your purpose of horizontal alignment.
.ed_button{
display: table;
float: left;
margin-right: 3px;
}
and the inner-div should have display: table-cell
.ed_button span{
display: table-cell;
vertical-align: middle;
}
Check out the DEMO here.
vertical-align property will work for table or table-cell
JSFiddle
since you have fixed dimension, i would suggest to remove span from multi-line and instead use line-height = div height trick for the purpose of single-line text
.ed_button span {
vertical-align: middle;
height: auto;
line-height:40px;
}
demo
I have added this to the CSS Part
.ed_button {
display: table-cell;
vertical-align: middle;
border-right: 5px #FFFFFF solid;
}
Working Fiddle
.ed_button{
background-color: #F9A11A;
clear: both;
float: left;
font-size: 14px;
height: 40px;
margin-bottom: 10px;
text-align: center;
width: 120px;
}
Use this css style for your code it 'll work fine
None of your text are alligned in middle. It is just beacause there is more text in the 1st and 2nd box that it seems to be in middle.
You can also try padding-top, margin-top or Position properties of css.