How can I center text (horizontally and vertically) inside a div block?
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Update for 2020:
Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:
#container {
display: flex;
justify-content: center;
align-items: center;
}
To specify a fixed width for the child, which is called a "flex item":
#content {
flex: 0 0 120px;
}
Example: http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
Example: http://jsfiddle.net/2woqsef1/2/
The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
Update for 2016 / 2017:
It can be more commonly done with transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:
position: relative;
top: 50%;
transform: translateY(-50%);
Example: https://jsfiddle.net/wb8u02kL/1/
To shrink-wrap the width:
The solution above used a fixed width for the content area. To use a shrink-wrapped width, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example: https://jsfiddle.net/wb8u02kL/2/
If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height
method would work. Otherwise, flexbox would do the job.
How do I center text over a div that dynamically changes width within another div?
Place it in a separate span
(or div
, p
, whatever):
const progressBar = props => {
return (
<div className={ classes.ProgressBar }>
<div style={{ width: props.passed }}></div>
<span className="label">{props.passed}</span>
</div>
);
};
Use position: relative
on the outer container:
.ProgressBar {
position: relative; /* <<< */
width: 125px;
max-width: 125px;
background: rgb(255, 97, 97);
border-radius: 4px;
height: 40px;
box-shadow: 0 2px 3px rgb(110, 109, 109);
overflow: hidden;
transition: 0.2s ease-in-out;
}
Then style the span
, for example:
.ProgressBar .label {
position: absolute; /* <<< reason for relative positioning */
top: 0;
left: 0;
width: 100%;
padding: 5px; /* <<< adjust to your needs */
text-align: center;
}
centering text inside a div
Don't use tables for this kind of things. It isn't something you can solve by using a table.
For what I can see, it is working perfect. Here is a working example: http://jsfiddle.net/T7V58/1/
Your code is correct, what is the problem? Just remove the p
tag and you are there.
<div class="playerDetailsPage">
<h4>The text will be in the center</h4>
</div>
CSS:
.playerDetailsPage {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
vertical-align: middle;
line-height: 390px;
}
How to center text in a div element?
You could simplify your structure a bit, and use display:table-cell
on the a
element.
html
<div class="w1h1 medium">
<a class="userLink" target="_blank" href="Fancybox.aspx">
text in the middle
</a>
</div>
css
div.w1h1 {
width: 150px;
height: 150px;
font-family:sans-serif;
background-color: #06849b;
}
a.userLink {
width: 150px;
height: 150px;
display: table-cell;
vertical-align:middle;
text-align:center;
color: #FFFFFF;
text-decoration: none;
}
Demo at http://jsfiddle.net/yWLYV/1/
works down to IE8
How to center text in a smaller div?
You can use left: 50%;
on the text element which results in a position where left edge is at the center of the surrounding element. To correct this and postion the middle of the element at the center of the surrounding div you need to transform half of the text back to the left. You can archieve this with transform: translateX(-50%);
. Moreover it is important, that the surrounding element has position: relative;
.
Your example would look like this:
.container { width: 100%; height: 50px; background: yellow;}
a { position: relative; width: 100px; height: 100px; margin: 0 50px; background: red; white-space: nowrap; float: left;} span { position: absolute; left: 50%; transform: translateX(-50%); text-align: center;}
<div class="container"> <a href="" class="box-1"> <span>Lorem</span> </a> <a href="" class="box-2"> <span>Lorem ipsum dolor sit amet</span> </a> <a href="" class="box-3"> <span>Lorem ipsum dolor sit</span> </a> </div>
Center text in div?
You may try to use in your CSS the property vertical-align in order to center it verticaly
div {
vertical-align:middle;
}
if it's a size problem, please notice that 2 text lines and a padding style have great chance to have a height superior to 30px.
For example, if your font size is 12 px and your div padding is 5 px, a one text line div height will be 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px so no problem,
With a 2 text lines div, it will be 5px +12px *2 (2 lines) + 5px = 34px > 30px and your div height will be automatically changed.
Try either to increase your div height (maybe 40px) or to reduce your padding.
Hope it will help
One-line text not aligned to center of div
Here is the fix using your code (i changed the background color and opacity so I could see it).
Main changes were to make parent display: table and to give the child span a width of 100% so that your text-align would work.
span.text-content { background-color: white; color: white; cursor: pointer; display: table; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
span.text-content span { display: table-cell; width: 100%; text-align: center; vertical-align: middle; color: #000; font-weight: 900; text-transform: uppercase; position:absolute; top: 45%;}
<span class="text-content"><span>Post Title</span></span>
How to center text within a DIV vertically and horizontally
Try this:
<div class="bubble">
<p>blablabla</p>
</div>
.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
here is a fiddle: http://jsfiddle.net/hLwzymmL/
How do I vertically align text in a div?
The correct way to do this in modern browsers is to use Flexbox.
See this answer for details.
See below for some older ways that work in older browsers.
Vertical Centering in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Article summary:
For a CSS 2 browser, one can use display:table
/display:table-cell
to center content.
A sample is also available at JSFiddle:
div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
Related Topics
Internet Explorer "CSS Was Ignored Due to Mime Type Mismatch" on Local Files (No Server)
Disable CSS Animation on Pseudo Element Inherited from Parent
Rotating a Text to 270 Degrees in IE8
CSS - Font Being Blocked from Cross-Origin Resource Sharing Policy
CSS Min-Height Not Working on Mozilla Firefox
Background Color of Tspan Element
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Flexbox VS Tables, Why Do We Need Flexbox
Are All CSS Font-Weight Property's Values Useful
100% Width Bg Images Not Extending on Horizontal Scroll
Is a CSS Property Starting with a Hash (#) Valid
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
CSS - First Child Without Certain Class
How to Remove All Default Webkit Search Field Styling