I have like this little box with text inside, but it is stuck in the top, I have tried using Vertical Align it did not help, here is the code:
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline;
vertical-align:middle;
}
jsfiddle link:
http://jsfiddle.net/2Hq3s/
I need the text to be in the absolute middle without enlarging the text.
Add to .Letters
line-height:40px; /* Same value as your 'height' */
vertical-align:middle;
DEMO
Use display: table, table-cell, like here: http://jsfiddle.net/maximgladkov/MALAj/
HTML
<p class="Letters">
<span>aasdfasd<br/>asdfasdfasdf</span>
</p>
CSS
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:400px;
width: 400px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: table;
}
.Letters span {
display: table-cell;
vertical-align: middle;
}
Use absolute positioning
top:50%;
bottom:50%;
position:absolute;
http://jsfiddle.net/2Hq3s/3/
Use display:table-cell on parent to use vertical align property
Here is a fiddle
<div class="parent">
<p class="Letters">a</p>
</div>
.parent{
background-color:#3594F0;
display:table-cell;
}
Related
I have a span which has to aligned bottom and left-most to the content of it's container. Span text-node and container text-node font-size may differ.
Whatever it's span should always align to its container text-node bottom and to left-most. I tried using float left to the span node. It aligns to the left most but not to it's bottom. Removing float to the span, Aligns bottom but not left most. Sorry if I have not explained you better.
Refer the image attached for more clarification
Also here is the code which I tried:
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
P.S I don't want any modification to the DOM. I have specific reason for this DOM structure which is going ti be vague if i'm going to explain you guys. Also don't want absolute position to be applied for the span. Thanks in advance
You have a flexbox container - so why not make w100 also a flexbox and align vertically using align-items: center - see demo below:
.flexCtn {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
width: 300px;
border: 1px solid #dfdfdf;
background: #fff;
}
.w100 {
font-size: 30px;
width: 100%;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
}
span {
font-size: 14px;
float: left;
display: inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
padding : 16px 0 0 0; /* specify top position */
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
I have used flex property
https://plnkr.co/edit/flxsEcpSBe8sr2w3wPFc?p=preview
div{
font-size:14px;
display:flex;
align-items:flex-end;
flex:1;
}
I have a post header div with height of 70px/4.375em
In it is a category h2 and a p timestamp
I want it to be aligned as demonstrated in this picture
(made in Photoshop)
Here is my HTML:
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
And my CSS:
.post-header{
height:4.375em;
width:25em;
margin-bottom:0;
float:left;
}
.category{
color:white;
display:inline;
float:left;
margin:0.625em;
}
.timestamp{
color:white;
display:inline;
float:right;
margin:0.625em;
}
Please help me with the CSS to get the design that I want
You can change your CSS as follows:
.post-header {
height:4.375em;
width:25em;
margin-bottom:0;
display:block;
}
.category {
color:white;
display:inline-block;
width:45%;
margin:0.625em;
}
.timestamp {
color:white;
display:inline-block;
text-align:right;
margin:0.625em;
width:40%;
}
This way, you get better control over your layout since you can specify both the width and the vertical align of the element. As we're at it, I'd use percentages for margins, but of course it goes on you
Visit fiddle to see it in action
You could try the following. Instead of floats, use inline-blocks with text-align: justify.
This only works if there at least two lines of text, so generate an extra blank line with the pseudo-element .post-header:after.
.post-header {
height: 4.375em;
width: 25em;
margin-bottom: 0;
float: left;
text-align: justify;
}
.category {
color: white;
margin: 0.625em;
display: inline-block;
}
.timestamp {
color: white;
margin: 0.625em;
display: inline-block;
text-align: right;
}
.post-header:after {
content: "";
display: inline-block;
width: 100%;
}
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
How can I vertically center text in a list? I've tried many ways, as you can see, however, nothing seems to work.
Here's the JSFiddle
And here is the CSS:
ul.nav {
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
width: 100%;
display: table;
table-layout: fixed;
vertical-align: middle;
height: 100px;
vertical-align:middle;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
}
li a {
display:block;
height:100%;
width:100%;
text-decoration:none;
vertical-align: middle;
align-items: center;
vertical-align:middle;
}
li a:hover {
background-color: #0099FF;
color:White;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
}
And HTML:
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">News</li>
<li class="nav">Contact</li>
<li class="nav">About</li>
</ul>
I just want to get the text completely centered, but no matter what I try, it always seems to stay at the top.
One simple way to vertically align your text is to set line-height:100px on your list items.
jsFiddle example
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
line-height:100px;
}
Or, remove the display:block rule from your links (no line-height change here)
jsFiddle example
Note that for the second option, you'd have to tweak the link's padding if you want the link to take up more room.
I have two divs side by side in a control (RadRotator).
<div class="title_link_Wrapper">
<div class="title">
<span><%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%></span>
</div>
<div class="link">
<span>Link</span>
</div>
</div>
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
}
It is working in JsFiddle
But is not working in the control:
Any hint?
You can use display:table;(parent div) and display:table-cell;(children div) which gives the same output and works most of the times:
CSS
.title_link_Wrapper {
width:550px;
display:table;
}
.title{
display:table-cell;
width: 100%;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
display:table-cell;
min-width:60px;
margin-top:6px;
}
Demo Fiddle
Seems like you forgot add float:left; to the div with class link.
i think you need this :
<div class="title_link_Wrapper">
<div class="title">LeftLeft
<span class="link">right</span>
</div>
</div>
css
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
float:right;
}
DEMO
Div by default is Display: Block, which causes an element to be alone on that line.
you will want to force your divs to be Display: Inline
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
display: inline; /* add this */
}
.link {
margin-top:6px;
display: inline; /* add this */
float: right; /* add this */
}
you may even want to wrap them in a div set to block.
Another thing that may happen is there is no specific width on .link, so if that gets wider than 20% you will spill over into the next row again, since you .title is set to 80%
I have next HTML code, I want to put copyright span to the center of footer but I am can just put them to the top center. What I need to change in my CSS ?
<div class="main">
<div class="footer">
<span class="copyright">some text block</span>
</div>
</div>
and next CSS
.main { width: 100%; height:1563px; background:url(../images/1.jpg) 50% 0 no-repeat ; overflow:hidden; position:relative;min-height:100%; }
.footer {position:absolute; bottom:0; width:100%; text-align:center; height:60px; background-color: #CDCBB8}
.copyright { font-family:"Myriad Pro", sans-serif; font-size:14px; color:#999; display: inline-block; vertical-align: middle; line-height: normal; }
set line-height:60px for copyright:
jsFiddle
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px; color:#999;
display: inline-block;
vertical-align: middle;
line-height: 60px; /* as the height of container */
}
or set line-height:60px to the continer like this:
.footer {
position:absolute;
bottom:0; width:100%;
text-align:center;
height:60px;
line-height:60px; /* as the height */
background-color: #CDCBB8
}
note: if you have more than one line in your copyright it is better that you set line-height:60px to the container and set line-height:1; to the copyright.
DEMO
Check it on http://jsfiddle.net/dfW66/
.main {
width: 100%;
height:1563px;
background:url(../images/1.jpg) 50% 0 no-repeat;
overflow:hidden;
position:relative;
min-height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
text-align:center;
height:60px;
background-color: #CDCBB8
}
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px;
color:#999;
line-height: 60px;
}
Set line-height to 60px.
vertical-align:middle can put into action by changing display properties of .footer and .copyright to table and table-cell, like this:
.footer{
display:table;
}
.copyright{
display:table-cell;
}
Then your vertical-align:middle will move the copyright text to vertically middle.
Write:
.footer{display:table;}
.copyright{display:table-cell;}
Fiddle here.
If it's just the text you want to center you can do:
text-align: center;
If you want to center the whole div give it a width and call
margin: 0 auto;
on it.