I have the following HTML
<span class="or">
or
</span>
Styled like so:
.or {
height: 25px;
width: 25px;
border-radius: 50%;
background-color: red;
display: inline-flex;
align-items: center;
justify-content: center;
}
This results in the following element.
Notice how the text itself is not quite vertically centered (even though the highlight of the text is centered). I've tried changing the line-height attribute and vertical-align: middle; among others but nothing seems to to do anything. How can I center the text in this div?
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've created a div in HTML:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 80px;
}
...
<div class="Div">
Just testing my Div.
</div>
...
Output:
I want the text to be in the middle of this rectangular, vertically and horizontally. How should I make it happen?
To be mentioned, I didn't use this div inside the main body, it's used inside another div; But in that i also have text-align: center;. I don't know if it's important; But i can provide more details about this code if needed.
P.S: I'm very new to css and html. Please accept my apologies if this code doesn't meet some standards.
There are several ways to do this. Since you, yourself tried to use vertical-align in the first place, so vertical-align will only work with display: table-cell;. In order to achieve it, you should set your div, display to table-cell and then you should also define a specific width for your div (I just went with 100vw to fill the available viewport).
So your final code should be something like this:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 20px;
height: 80px;
width: 100vw;
}
<div class="Div">
Just testing my Div.
</div>
But if you want some generic approach for this you should use flexbox instead. In order to use flexbox, you should define three specific properties to meet your requirement.
display: flex;. This will indicate your div as flex items and then their children should follow flex rules.
align-items: center;. This will indicate all of your items should align in the middle of your div horizontally.
justify-content: center;. This will indicate all of your items should align in the middle of your div vertically.
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
You may use display: flex;, justify-content: center; and align-items: center in your class Div
You may go http://howtocenterincss.com/, to auto-generate the code that centre text, image or div.
.Div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 1px;
/* text-align: center;
vertical-align: middle; */
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
I’m trying to vertically align the content in the cyan div without using one of the following methods:
Vertical align (as it requires displaying as a table & will have knock-on effects on the parent div padding etc)
Line height (as there’s more than 1 line with 3 actual spans)
Table (due to knock-on effects like with vertical align)
Absolute positioning (as some other cyan divs will have more text than others, meaning some will have more lines than others)
Equal top & bottom padding (same reason as abs positioning)
Flexboxes (I forbid these as they have serious knock-on effects!)
The cyan div is an inline-block. What would be the best way to achieve this? I want to be able to set the padding between each of the 3 spans to space them out nicely.
NOTE:
I've updated my answer to include flex positioning but on mobile view the 2nd cyan div below is not aligned centrally
.sections {
background: #f2f2f2;
width: 100%;
height: auto;
text-align: center;
padding: 100px 10%;
box-sizing: border-box;
}
h1 {
font-size: 62px;
text-transform: uppercase;
font-weight: 400;
}
p {
font-size: 22px;
font-weight: 300;
padding-top: 10px;
}
.foster-cta {
box-sizing: border-box;
width: 250px;
height: 200px;
background: cyan;
display: inline-block;
border: 1px solid grey;
margin-top: 30px;
/* adding display flex makes the 2nd cyan div below not aligned centrally on mobile view */
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
display: inline-flex;
}
.foster-top {
display: block;
font-size: 30px;
}
.foster-middle {
display: block;
text-transform: uppercase;
font-size: 22px;
}
.foster-bottom {
display: block;
font-weight: 300;
font-size: 16px;
}
<section class="sections">
<h1>header 1 tag</h1>
<p>some random text to go here lorem ipsum sit semei geono wfnwoenfowe fwenfuowe ffe efnpi enfo wfeonwofun weofun weofnwe ofunwe foiej.</p>
<div class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">some random text here</span>
<span class="foster-bottom">a load more random text goes here that will be more descriptive and longer.</span>
</div><!--
--><div class="foster-cta" style="margin-left:50px;">
<span class="foster-top">icon</span>
<span class="foster-middle">text</span>
<span class="foster-bottom"> a load more random text goes here that will be more descriptive and longer a load more random text goes here that will be more descriptive and longer.</span>
</div>
</section>
Flexbox is your best bet when doing any sort of aligning in CSS. The code is also very simple:
.div-parent {
display: flex;
}
.div-child {
align-self: center;
}
This will align vertically centered only
I found that the text inside of <button> is automatically vertically centered, while text inside of <div> is top aligned.
I tried to find out which CSS rule made the difference but failed.
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
}
div {
text-align: center;
display: inline-block;
cursor: default;
box-sizing: border-box;
}
<div>text text</div>
<button>text text</button>
<div>text text text text</div>
<button>text text text text</button>
<div>text text text text text text</div>
<button>text text text text text text</button>
As for the above example, comparing all the computed CSS rules from Chrome, I could only find one different pair -- align-items: stretch for <div> while align-items: flex-start for <button>.
But assigning align-items: flex-start doesn't help. So I got totally confused.
what confused me is that the text-vertical-alignment is different between <div> and <button> even if you set all the CSS rules with the same corresponding value. In other words, with the same CSS rules, <div> and <button> behave differently. Why?
What is the magic under the hood?
I can vertically center text inside of <div> (example below). I'm just curious about what causes the difference between the text-vertical-alignment.
Maybe it's not caused by a particular CSS rule, but because the layout algorithms for the two elements are different in browser?
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
}
div { /* basic CSS rules to button-fy */
text-align: center;
display: inline-block;
cursor: default;
box-sizing: border-box;
}
/* Magic */
div, button {
vertical-align: middle;
}
div span {
display: inline-block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div><span>text text</span></div>
<button>text text</button>
<div><span>text text text text</span></div>
<button>text text text text</button>
<div><span>text text text text text text</span></div>
<button>text text text text text text</button>
Since you are using inline-block, you need to use vertical-align as the default is baseline:
Magic CSS:
vertical-align: middle;
The above will fix it:
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
vertical-align: middle;
}
div {
text-align: center;
display: inline-block;
cursor: default;
box-sizing: border-box;
}
<div>text</div>
<button>text</button>
And for the text inside the div to be centred, you need to use line-height to the height of the div.
Magic CSS:
line-height: 4em;
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
vertical-align: middle;
line-height: 4em;
}
div {
text-align: center;
display: inline-block;
cursor: default;
box-sizing: border-box;
}
<div>text</div>
<button>text</button>
If you look at Chrome source code you can kind of see how it works, at least for Chrome. It seems there's an anonymous flex box created with a specific style applied. It's not that straightforward — at least not for me — but still, you can deduce what style is applied to this anonymous element. You can see here:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/LayoutButton.cpp?sq=package:chromium
The interesting part:
void LayoutButton::updateAnonymousChildStyle(const LayoutObject& child,
ComputedStyle& childStyle) const {
ASSERT(!m_inner || &child == m_inner);
childStyle.setFlexGrow(1.0f);
// min-width: 0; is needed for correct shrinking.
childStyle.setMinWidth(Length(0, Fixed));
// Use margin:auto instead of align-items:center to get safe centering, i.e.
// when the content overflows, treat it the same as align-items: flex-start.
childStyle.setMarginTop(Length());
childStyle.setMarginBottom(Length());
childStyle.setFlexDirection(style()->flexDirection());
childStyle.setJustifyContent(style()->justifyContent());
childStyle.setFlexWrap(style()->flexWrap());
// TODO (lajava): An anonymous box must not be used to resolve children's auto
// values.
childStyle.setAlignItems(style()->alignItems());
childStyle.setAlignContent(style()->alignContent());
}
This gives something like this :
div span {
display: flex;
text-align: center;
min-width: 0px;
flex-grow: 1;
justify-content: center;
cursor: default;
margin: 0 auto;
height: 100%;
align-items: center;
align-content: center;
}
Then you just need to wrap the div content in that span and apply the style. All these rules are probably not all necessary or accurate but the result seems ok:
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
float: left;
}
div span {
display: flex;
text-align: center;
min-width: 0px;
flex-grow: 1;
justify-content: center;
cursor: default;
margin: 0 auto;
width: 100%;
height: 100%;
align-items: center;
align-content: center;
}
<div><span>text text</span>
</div>
<button>text text</button>
<div><span>text text text text</span>
</div>
<button>text text text text</button>
<div><span>text text text text text text</span>
</div>
<button>text text text text text text</button>
I think you may consider one of the following solutions
Solution #1
Add these to the div style
display: table-cell;
vertical-align: middle;
If you still need to use inline-block display, you can use nested div, the parent div will be displayed as (inline-block), the child div will be displayed as (table-cell) and that's where you middle the text.
Solution #2
You can set the div padding and line height dynamically using jQuery .. and this will be done on the run time, and will be adjusted based on the size of the content inside the div. you can check this question jquery set line-height equal to parent container height
Hi,
Please see the above picture.
I need a link, in the shape of a circle:
- The whole circle should be the active area of the link
- Corners of the square 'behind' the circle should not be active
- Must allow for multiple lines of text in the circle
Note: I can do this fairly easily with table-cell but I need the active area to be only the circle. I dont want the user to be able to hover over the corner of the square behind the circle and click the link.
Thanks
You could use border-radius with a fairly big radius. Check this fiddle:
a {
display: inline-block;
border-radius: 80px;
height: 80px;
width: 80px;
background: red;
padding-top: 25px;
text-align: center;
box-sizing: border-box;
}
As to how to center the text in the button: with just one line of text you could simply set the line-height of the button to equal its height. But that won't work with multiple lines of text obviously. Check out this fiddle from this SO answer, it might help you out.
See the following sample. Note the line-height: 160px; - this trick aligns the text vertically.
.circle-link{
display: inline-flex;
width: 160px;
height: 160px;
background-color: green;
color: white;
border: solid 1px darkgreen;
border-radius: 80px;
font-size: 20px;
text-decoration: none;
text-align: center;
align-items: center;
justify-content: center;
}
<a href='#' class='circle-link'>Multiline<br />cyrcle link</a>
UPDATE:
If you need to center text with multiple lines (or even a text with images), the most reliable method is using of flexible model. Instead of 'display: block' or 'inline-block' set display: flex; or display: inline-flex; and then align-items: center; and justify-content: center;
For more information about vertical centering methods see the article Vertical centering of elements in HTML
I'm new to css, so I not getting the way to make the text center of a container (div).
My HTML is
<div class="container">Some text goes over here.</div>
I tried with text-align: center, and vertical-align: middle, but no luck.
Is there any way we could make the text align in the center of the Div.
You can use the display: table-cell and the vertical-align: middle to set you text at the middle of the container.
.divClass {
width: 200px;
height: 200px;
border: 2px solid red;
text-align: center;
vertical-align: middle;
display: table-cell;
}
Check the working over here. http://jsfiddle.net/32rD7/
Use Text-Align:center;
<div class="container" style="Text-Align:center;">Some text goes over here.</div>
If you don't feel like applying various CSS hacks, you could take a look at the (experimental) flexbox layout.
div.container {
display: flex;
justify-content: center;
align-items: center;
}
Note that I omitted vendor prefixes.