My .cent class is for <li> elements. I want to center the text of the <li> both horizontally and vertically. text-align:center; takes care of horizontal centering, but the vertical centering isn't working. What's the CSS trick for this?
.cent{
height:20px;
width:20px;
text-align:center;
vertical-align: middle;
}
Use line-height property.
Set it equal to height of element, and text will be vertically centered.
.cent{
height: 20px;
width: 20px;
text-align: center;
/*vertical-align: middle;*/
line-height: 20px;
}
What is its parent?
.parent {
position: relative;
}
.cent {
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}
Or if you want vertical-align: middle to work, set display: table-cell.
Try to set the style for li tag, margin and padding tags are will help you
Like,
# set default
li
{
margin: 0;
padding: 0;
}
after write the style for your class cent, it will be affect the li tag properly.
Related
Is it possible to align a rotated text to center?
For example here:
ill try using:
.accordion div.image .title {
bottom: -15px;
color: #fff;
display: block;
font-size: 16px;
max-height: 200px;
position: absolute;
transform: rotate(270deg);
transform-origin: 0 0 0;
white-space: normal;
left: 20px; // this is only the way to center it from left corner }
But when the text has a line break, i have no chance to align it to the center.
Any ideas?
Here is one approach (proof of concept) that involves using the translate function of the transform property and display: table-cell.
First, use display: inline-block on the parent container to get a shrink-to-fit to the image size (or else specify fixed dimensions if you can).
You then define an absolutely positioned container to contain the label. I fixed the width and height (this makes things easier) and then rotated and translated the box to center it within the parent.
Finally, I used vertical-align: middle in the nested table-cell container to allow multiple lines of text to remain centered.
If you are adding this to a pre-existing HTML/CSS structure (accordion?), you need to make the CSS very specific so that you don't break other CSS styling.
You may still need to make some adjustments depending on how you want the bottom of the label to be positioned and so on.
.image {
position: relative;
border: 1px dashed blue;
display: inline-block;
}
.image img {
display: block;
}
div.cell {
display: table-cell;
text-align: left;
vertical-align: middle;
}
div.image .title {
font-size: 16px;
white-space: normal;
color: #fff;
display: table;
border: 1px dotted blue;
position: absolute;
bottom: 0%;
left: 0%;
transform: rotate(270deg) translate(50%,50%);
transform-origin: 50% 50% 0;
width: 300px;
height: 100px;
margin-left: -50px;
}
<div class="image">
<img src="http://www.placehold.it/300x400">
<div class="title"><div class="cell">The title text
that can span two lines or more in a box<div></div>
</div>
Update: Yes, putting text-align: center in the containing div did the trick!
I'm at a loss as to why the img is not centering.
Here's the CSS:
#add_next {
clear: both;
width: 79%;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
.next_button {
height: 60px;
margin-top: 13px;
margin-left: auto;
margin-right: auto;
text-align: center;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
And here's the html snippet:
<div id="add_next"><a href=# ><img src="images/next button5.png" class="next_button" /></a></div>
If you add text-align:center; to the parent div element, it will center.
fiddle
You can add display:block to the image or text-align:center to the containing div.
At the moment it's the image is an inline element so it will align to your default text align (usually left)
Inline elements (a, img) can't be centered using auto margins, and you can't apply text-align: center; to the element you want to center.
try adding text-align: center; to #add_next.
I used the JsFiddle at jsfiddle.net/5tzk3/10. I changed it to display the div as square shaped dialog (both horizontally and vertically centered). The result is at jsfiddle.net/5tzk3/548.
As you see, centering horizontally was easy, but I could not get it centered vertically. Anyone who knows how to do that with pure CSS?
Edited code below:
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
</div>
</div>
html, body, .blind {
height: 100%;
width: 100%;
}
.blind {
left: 0;
position: fixed;
text-align: center;
top: 0;
}
.wrapper {
display: inline-block;
margin: auto;
position: relative;
width: 50%;
}
.wrapper:after {
content: '';
display: block;
padding-top: 100%;
}
.main {
background-color: rgb(0, 162, 232);
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Use display: table for the parent div, and display:table-cell; vertical-align: middle for the content div which you want to vertically center.
The most common way of doing this if you've got an element with known dimensions is to use positioning to firstly position it top: 50% (which places the top edge of the element 50% of the way down) and then use a negative top-margin of half the height of the element (pulling it back up by half it's height).
To give you an example, to absolutely position a 200x200 element dead-centre on the page you would use:
.element{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px
}
Alternatively, you can use a combination of display: table and then display: table-cell on the parents to open up the ability to use vertical-align although this is a bit nasty when it comes to laying out elements around it.
you can drop absolute positionning and use either display:table or inline-block with pseudo elements.
here is a mixed of the 2 methods
1) html/body as a table one cell
2) inner content with ratio preserved and content as inline box set in the middle.
.ratio1-1 {
width:25%;
vertical-align:middle;
margin:auto;
background:turquoise;
}
.ratio1-1:before {
content:'';
padding:50% 0;
width:0;
display:inline-block;
vertical-align:middle;
}
.ib {
display:inline-block;
vertical-align:middle;
}
/* center body content as a table cell */
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="ratio1-1">
<div class="ib">content in middle</div>
</div>
demo: http://codepen.io/gc-nomade/pen/pubFm
I understand that if I wrap an outer div with a relative position around a div with an absolute position, then the absolute positioning of the inner div will be relative to the outer div (duh).
However when I do this:
<div class="outer">
<div class="inner"> </div>
</div>
CSS:
.outer {
margin: 0 auto;
padding: 20px;
width: 700px; }
.inner {
position: absolute;
text-decoration: none;
cursor: pointer;
bottom: 20px;
left: 5px;}
It makes the inner align with the browser window, not the relative div! I'm very stumped on this simple concept, I've been able to do this sort of thing before but I must be doing something wrong.
Here is the complete jsfiddle for you to see: http://jsfiddle.net/DDYUK/1/
.outer is never given the CSS property position:relative
.outer {
position: relative;
margin: 0 auto;
padding: 20px;
width: 700px;
}
If you do not apply position:relative; to the .outer div, it will default to position:static. Absolutely positioned divs will be positioned relative to the closest parent that is positioned relatively. If there is none, it will be positioned relative to the page itself.
update css here fiddle demo
i update in your jsfiddle
use relative in outer div
.twitter-box {
margin: 0 auto;
position:relative;
padding: 20px;
width: 700px; }
.twitter-box p {
text-decoration: none;
display: inline;
position: absolute;
margin-top: 69px; }
.twitter-box img {
height: 150px;
width: 150px;
text-align: center;
margin: 0 auto; }
.twit {
position: absolute;
text-decoration: none;
cursor: pointer;
bottom: 20px;
left: 5px;}
I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div class="hdr_lnk">
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_ctr {display: block; text-align: center; font-size:0.8em; position: absolute; height: 24px;margin: auto;}
.hdr_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
What I am trying to do is have the text (address links) appear horizontally centered with margins to each side of the UL's. It's not working and the text and UL's all goes to the left as in this:
fiddle
Is there anyone who could tell me how I can get the UL's to appear in the middle of the page.
thanks
I'm not quite sure of the context that you're putting that code in, but this should achieve the effect you want:
#ftr_ctr {
width: 100%;
text-align: center;
font-size:0.8em;
position: absolute;
height: 24px;
}
.hdr_lnk ul{
margin: auto;
}
.hdr_lnk li {
display: inline;
padding: 0;
}
The main things you needed were the width: 100%; rule in the #ftr_ctr element and the margin: auto; rule in the .hdr_lnk ul rule. (The width doesn't have to be 100%, but it needed to be set to stop the element from shrink-wrapping its contents). margin: auto; will centre contents equally vertically or horizontally or margin: 0 auto; will centre contents horizontally.