I want to vertically middle align text in a div that has height in percentage. The code i am using is this.
CSS-
.div{
position: fixed;
left: 0px;
border-radius: 10px;
height: 6%;
width: 20%;
transform: translate(-10px,0px);
-ms-transform: translate(-10px,0px);
-webkit-transform: translate(-10px,0px);
-o-transform: translate(-10px,0px);
-moz-transform: translate(-10px,0px);
z-index: 10
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
display: block;
vertical-align: middle;
}
HTML-
<div class="div"><span>This is some text.</span></div>
This isnt working. Please help.
You can use the parent div display as table and child div display as table-cell or another approach if you use a text with one line then use line-height property.
Css with table-cell display See fiddle
.div{
position: fixed;
left: 0px;
border: 1px solid black;
border-radius: 10px;
height: 50%;
width: 20%;
z-index: 100;
display: table;
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
display: block;
vertical-align: middle;
display: table-cell;
}
Css with line-height See fiddle
Try adding a line-height on the div equal to the actual height of that div.
So if you have
<div class = "foo"><span>Blah</span></div>
Your style should look like
.foo {height:5em; line-height:5em;}
span {font-size:1em;}
Further explanation and other examples if you want it.
Related
Considering the next code:
.test {
position: relative;
padding: 0;
margin: 0;
border: 0;
background: initial;
font-size: 11px;
border: 1px solid black;
margin-left: 20px;
}
.test::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: red;
}
<button class="test">Some Text Content</button>
In Chrome it's rendered like (hot it is required):
In Safari it's rendered like:
So, in Safari it's not vertically centered and the block has different size.
The main question is how to center it vertically in Safari?
The secondary question is how to make blocks absolutely similar?
I tried display: flex; align-items: center;, vertical-align: center;, changing line-height – nothing from that seemed to work...
.btn {
border:1px solid #000;
box-sizing:border-box;
color:#000;
display:inline-block;
font:1rem/1.5 sans-serif;
height:2rem;
padding:0 1rem;
text-align:center;
vertical-align:middle;
width:auto;
}
I'm having the following CSS structure, which is a little complicated. The complete code is placed in the this JSFiddle and I'm struggling with the last think which I need to implement there.
Between the horizontal lines (which are in line with the circles), I would need to have additional line(s) rotated for 90 degrees and to have some text in front of it. It should look something like in this picture, where I have added the missing elements in red.
I have already tried to implement something like this as in fiddle from the link above, but it's not working as expected. Note that there is some inline CSS into the HTML as well, which nature is dynamic and is generated during run time.
As a note, what I tried is adding this new HTML element, but I would prefer to not use inline style for the purpose of adding these lines (if possible). Here is the CSS and HTML for the newly added elements:
.chart .left-line {
transform: rotate(-90deg);
display: flex;
align-items: center;
position: absolute;
right: -257px;
width: 530px;
z-index: 10;
top: 245px;
}
.chart .left-line hr {
width: 100%;
background: #1d2026;
opacity: 0.25;
}
.chart .left-line-container {
width: 100%;
font-family: Open Sans;
font-size: 12px;
color: #1d2026;
font-weight: 700;
margin: 0 16px;
-webkit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="left-line-container" style="top: 135px;">
<hr class="left-line-hr"> 12.34
</div>
I hope this could help:
.flex-parent {
display: flex;
width: 100%;
height: 180px;
align-items: center;
padding: 50px 0;
transform: rotate(-90deg);
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #e3e3e3;
border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 150%;
color: #777777;
letter-spacing: 3px;
}
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">text here</div>
<div class="flex-child-edge"></div>
</div>
You can use the following code to solve your problem:
hr{
width: 1px;
height: 100%
}
I am extremely new to CSS and am trying to edit the CSS on my WordPress theme. I am trying to change the date text on each blog post to a centered diamond. Right now, I am having trouble getting the diamond centered on the post.
Forgive the extremely messy CSS. I know it's botched.
.post_detail post_date {
width: 100%;
float: left;
margin-bottom: 20px;
text-align: center;
}
.post_info_date {
background: #fff;
height: 60px;
text-align: center;
transform:rotate(45deg);
width: 60px;
position: inherited;
bottom: 20%;
}
.post_info_date span {
color: #333;
display: table-cell;
height: 60px;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
}
Make USe of line-height property.
CSS
.post_info_date span {
color: #333;
display: block;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
line-height:60px;
}
Style Accordingly.
Hope this Helps..
Having some problems getting the correct css to align the text the way I would like.
.html file
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
.css file
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
Things display fine except for div 4 which has longer text which stretches outside.
I added a class to change the line height so the text wraps:
<div class='b c'>444444 4444</div>
.c {
line-height: 28px;
}
I would like to reduce the spacing between the lines so the text has a better fit inside the circle:
.c {
line-height: 18px;
}
I like the spacing, but would like to shift the text down into the center so I added some padding inside the border:
.c {
line-height: 18px;
padding-top: 6px;
padding-bottom: 0px;
}
The circle is expanded into more of an ellipse-type shape.
The height is explicitly stated as 56px.
The margin is 5px (x2 for top and bottom): 10px
The border is 2px (x2 for top and bottom): 4px
The content is two lines of wrapped text with a line height of 18px (x2): 36px
Adding padding of 6px results in 56px which is the specified height, so I am unclear why the padding would expand the height.
Looked into line-height a bit and clearly I don't really understand how that works. I have tried many other settings and values, but nothing that gives me my desired result.
Same behavior in Chrome, Firefox, Opera, and Safari.
Any thoughts, direction, or clarification on what I am doing wrong?
Size of the divs are 56x56 pixels. Once you add any padding (padding-top: 6px), it will add up to 56px, which will result in 62px. Your div (circle) will become an egg. What you need to do is set box-sizing: border-box on the div.
Initial value of box-sizing is content-box. The height you enter is the content's height. Any padding and border isn't included in that value and will expand the div. box-sizing: border-box on the other hand, will keep the div 56px even after you enter a padding. It'll decrease the height of the content and keep the box at the same height.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
.c {
line-height: 28px;
line-height: 18px;
box-sizing: border-box;
padding-top: 9px;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b c'>444444 4444</div>
<div class='b'>55555</div>
</section>
display: table; and display: table-cell; is a good solution for vertical alignment, regardless of the properties of the child element.
.container {
display: table;
border: 1px solid red;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
.one {
width: 100px;
height: 100px;
}
.two {
width: 200px;
height: 200px;
}
.three {
width: 75px;
height: 75px;
}
<div class="container one">
<span>some text</span>
</div>
<div class="container two">
<span>some other text</span>
</div>
<div class="container three">
<span>some text that stretches longer</span>
</div>
padding counts toward element size. So height: 56px and padding-top: 6px will make the element 62px high. Just adjust the height of that element to 50px (desired height minus vertical padding, 56 - 6).
Another option is to change box-sizing to border-box (default value is content-box). Which will make padding and border-width to be considered by width and height - https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
You could do something like this:
.b {
position: relative;
top: 50%;
transform: translateY(-50%);
}
and add a wrapper with
transform-style: preserve-3d;
You can use flexbox, where there is no need to calc lines and match padding against size, this does it all dynamically.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
is there any other proper way to display text at bottom because with Display:Table-Cell, I can't use margin property.
div.Product2 {
display: table-cell;
width: 250px;
height: 120px;
text-indent: 15px;
vertical-align: bottom;
padding-bottom: 10px;
letter-spacing: 1px;
background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
}
The only way I believe you could do this without table-cell would be using multiple divs. You have a choice to either keep the table-cell and place it inside a wrapper div or just put your text into a child div
div.Product2 {
/*display: table-cell;*/
width: 250px;
height: 120px;
text-indent: 15px;
/*vertical-align: bottom;*/
padding-bottom: 10px;
letter-spacing: 1px;
background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
position: relative;
}
div.product3 {
position: absolute;
bottom: 0;
}
<div class="Product2">
Some Text
<div class="product3">
Bottom Text
</div>
</div>
One method of achieving this is to wrap your text within a containing element, like <p>, and apply a CSS transform. This of course won't have broad support unless you use some prefixes.
.Product2 {
width: 250px;
height: 120px;
text-indent: 15px;
padding-bottom: 10px;
letter-spacing: 1px;
background: #008f00;
}
.Product2 p {
position: relative;
top: 100%;
transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
<div class="Product2">
<p>Blah blah</p>
</div>
Another way is line-height, since your height is fixed, line-height is a good solution. No need to change your structure. Remove display:table-cell and vertical-align: middle.
div.Product2 {
width: 250px;
height: 120px;
text-indent: 15px;
padding-bottom: 10px;
letter-spacing: 1px;
background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
line-height:220px;
}
<div class="Product2">
Hello World!
</div>