I have a vertical block of text that looks left-aligned like this:
T
e
x
t
See this demo for better visualisation.
How do I align it using CSS and without breaking up the text, so that the characters appear to be horizontally centered within the block?
Letter spacing adds the space to the right of the letter. So you've to add equal padding to the left for imitating center alignment.
Apply padding-left equal to the letter-spacing
div {
width: 1em;
word-wrap: break-word;
margin:0 auto;
background: cyan;
letter-spacing:0.5em;
padding-left:0.5em;
text-align:center;
}
JSFiddle
Update
Visual appearance can be tweaked by simply changing the values…
JSFiddle
What about this DEMO?
HTML
<div>
<div>T</div>
<div>e</div>
<div>x</div>
<div>t</div>
</div>
CSS
div {
background: cyan;
width: 1em;
line-height: 0.7em;
text-align:center
}
OR this one DEMO 2
HTML
<div>
T<br>
e<br>
x<br>
t<br>
</div>
CSS
div {
background: cyan;
width: 1em;
line-height: 0.7em;
text-align:center
}
Try this FIDDLE
div {
background: cyan;
width: 1em;
letter-spacing: 1em;
line-height: 0.7em;
word-wrap: break-word;
margin: 0 auto;
}
try this {demo}
div {
background: cyan;
width: 60px;
line-height: 0.7em;
text-align:center;
word-wrap: break-word;
padding:0 10px
}
Related
I came across this behavior recently when a client reported that some of the buttons on a page had vertically centered text while others did not.
As it turns out, buttons will vertically center text inside them but links won't. Example here: http://jsfiddle.net/valentin/7EjtD/
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: inline-block;
vertical-align: top;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Is there any way to add this behavior to links as well outside of using line-height?
Button aligns to the middle because is its default behavior. Your fiddle is aligning top actually. To make it work you can wrap your elements on an display:table element, like a div. Then set the button and the link to be display:table-cell. Then your vertical-align will work. Like this:
<div class="wrapper">
LINK
<button>BUTTON</button>
</div>
And the css:
*{
box-sizing: border-box;
}
div.wrapper {
display:table;
}
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: table-cell;
vertical-align: middle;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Buttons are inline-block elements, while anchors are just inline. You can use padding to achieve the same effect:
a
{
padding: 91px 20px; /* <---(height-fontSize)/2 */
height: auto;
}
JSFiddle
TableData (TD AKA cell) are pretty damn good at default text centering ;)
live demo
a{
display: table-cell;
vertical-align: middle;
}
for clean-code-sake i'd use a special class like:
a.buttonAlike{
Sorry folks! Didn't see he wanted to avoid line-height. Original post:
Add line-height equal to the height of your element. In this case:
line-height: 200px;
DEMO: JSFIDDLE
i have two div like this :-
<div class="pdetails">
<div class="contact_details">
text
</div>
<div class="clear"></div>
<div id="contact_area_form_" class="tform_wrapper">
text
</div>
</div>
the parent div is pdetails and it have two div (contact_details,tform_wrapper),my problem is the div contact_details show in top and the div tform_wrapper show in bottom.
how can i set this two div in the same line.
css code :-
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 510px;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float: right;
}
Remove div which have "clear" class or hide this with display:none.
<div class="pdetails">
<div class="contact_details"> text </div>
<div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>
or use width in % value.
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 80%;
}
For me they show up in one line. Only when the window size is not big enough for both of them to fit, they will be shown in a vertical alignment. You could give the parent-div a fixed width to avoid that problem. Then in case of a small window size a scrollbar would show up.
I would go something like this: http://jsfiddle.net/Ewyzt/
the clear in between is the one saying there cant be more on this line and pushed the other box down what you want to do is clear after the last box so you can build after the two first boxes otherwise things will start to float u besides them.
.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float:left;
}
I would like to suggest to use display: inline-block; property instead of float
Demo for display: inline-block
I need to vertically align the text into a div that have a certain height.
If you go here you can see my problem: http://onofri.org/example/example3/
As you can see I have a #titleBox div that contain the text: Promoting Investment in Agriculture
The #titleBox have a specific height that is 40px. I want vertically align the text in the green div in such a way that is at the center.
This is my HTML and CSS code but don't work well:
<div id="container">
<div id="titleBox">
<p id="myTitle">Promoting Investment in Agriculture</p>
</div>
</div>
#titleBox{
margin: 0 auto;
width: 350px;
background-color: #6da662;
height: 40px;
vertical-align: middle;
}
#myTitle{
/* consente di posizionare un elemento al centro del suo contenitore */
margin: 0 auto;
overflow: hidden;
color: #fff;
font-size: 16.5px;
font-weight: bold;
text-align: center;
}
What have I to do to solve?
Tnx
Andrea
Try to add these styles to #myTitle:
vertical-align: middle;
line-height: 40px;
Here's another solution - add these styles to your page.
You should definitely get familiar with the display:table-cell property for vertical centering.
#titleBox{
display:table;
}
#myTitle{
display:table-cell;
vertical-align: middle;
}
If you want to be really concise, you can do it all in one element:
<div id="titleBox">Promoting Investment in Agriculture</div>
and apply the following CSS:
#titleBox {
margin: 0 auto;
width: 350px;
background-color: #6da662;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16.5px;
font-weight: bold;
}
See fiddle: http://jsfiddle.net/audetwebdesign/2PxsZ/
I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.
This is the css I use:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
The html is quite simply:
<h1>title</h1>
No matter what value I enter for vertical-align, the text is always at the top of the h1 element.
Am I miss-understanding the vertical-align property?
No CSS hacks needed. If I understand you correctly, then you can use this CSS:
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
See demo fiddle which equals a minimum height of 30px;
A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.
I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect
h1
{
font-size: 12pt;
line-height: 50px;
height: 50px;
}
Center the H1 title using flexbox align items center and justify content center, see this example:
div {
padding: 1em;
border: 1px dashed purple;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div>
<h1>Center this h1</h1>
</div>
Just add a float property and use padding-top: 50% for example:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
position: absolute;
float: center; /* If you want it to be centered */
padding-top: 50%;
}
I used a CSS custom property (variable) and calc
:root {
--header-height: 100px;
}
* {
margin: 0;
padding: 0;
}
header {
font-size: 16px;
height: var(--header-height);
justify-content: space-evenly;
display: flex;
border-bottom: 1px solid #000;
}
h1,i {
font-size: 1.2rem;
display: inline-block;
padding-top: calc(var(--header-height) - 1.2rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
<img src="https://placekitten.com/100/100" alt="logo" height="100">
<h1>
Kitten Stories
</h1>
<i class="fas fa-lock"></i>
</header>
I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.
http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).
Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.
Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.
Solution:
HTML
<div>
<h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
CSS
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
Fiddle:
http://jsfiddle.net/Snorbuckle/CnmKN/
Snippet (same as fiddle):
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
You can use a helper span element to vertical align your text like the following example:
html
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6
You should be able to accomplish this with line-height and vertical-align: middle;.
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
check this out
http://jsfiddle.net/CnmKN/59/
CSS Code
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell:
1) With line-height:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line.
2) position absolute/margin auto
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. Just try.
Key point is not to use pixels for alignment, use only %-s.
Works even on IE5 :)
here is Demo
.wrapper{
position: relative;
width: 100%;
height: 200px; /* change this value to see alignment*/
background-color: red;
margin: 0 auto;
}
.cell{
position: absolute;
display:block;
background-color: blue;
left:50%;
top:50%; /*this puches element half down*/
margin-left:-100px; /* this is the half size of cell width:200px;*/
margin-top: -.5em; /*this is the half size of font size*/
width: 200px;
color: #fff;
text-align:center;
}
<div class='wrapper'>
<div class='cell'>vertically aligned text</div>
</div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}