I have this codes:
<div style="height: 100px;">Text Go Here</div>
I want to have vertical-align text inner this div.
but I don't want to use line-height for example below:
<div style="height: 100px; line-height:100px;">I don't want to use line-heigh</div>
because line-hight shoud be: line-height:20px;
how I can do this?!
tnx :)
The easiest way to handle it is to treat the div like a table cell:
<div style="display: table-cell; height: 100px; vertical-align: middle;">Text Go Here</div>
div {
display: table;
height: 100px;
width: 100px;
border: 1px solid #ddd
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div>
<span>Text Go Here</span>
</div>
Related
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/
I'm using different DIV tags to act as tables and I want to get another DIV at the bottom of the content DIV.
<div class="table">
<div class="table-row">
<div class="table-information">
Content
</div>
<div class="table-content">
More content
<div class="extra">
Here's the extra content
</div>
</div>
</div>
</div>
Here's the CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-information {
background-color: #eaeaea;
height: 150px;
padding: 10px 15px;
width: 150px;
}
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
}
.extra {
vertical-align: bottom
}
As you can see I have vertical-align: bottom; for the extra class. I want to have the content within that DIV at the bottom and not right below the text More content. But nothing happens when I'm trying this solution.
http://jsfiddle.net/edgren/3jjbV/
How can I solve this problem?
Thanks in advance.
Here is 1 way to achieve that
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
position:relative;
width:150px;
}
.extra {
vertical-align: bottom;
bottom:0;
position:absolute;
}
I do it by adding relative position to the container table-content and then absolute positioning bottom to the extra.
here is a fiddle
Another way is like this:
.extra {
vertical-align: bottom;
display:table-cell;
height: 150px;
width:150px;
}
Here is a fiddle for the 2nd option.
From these 2 options personally i would go with the 1st one,
but you should be careful with the fixed widths and heights (because of the absolute positioning).
I am building a bunch of list items in an un-ordered list. The list has a fixed size of 250px X 75px;These list items are generated dynamically so i do not know what text will be displayed, so my li looks like this.
#pages-content li{
float: left;
width: 250px;
height: 75px;
margin: 15px;
vertical-align: middle;
text-align: center;
}
I found one suggestion that said to make the line height 75px and that worked until there is more than one line.
CSS:
#pages-content ul li{
width: 250px;
height: 75px;
text-align: center;
}
HTML:
<div id="pages-content">
<ul>
<li>Matter here</li>
</ul>
</div>
Working fiddle
Do you have to use lists? Can you use divs instead?
<style>
.div {
width: 250px;
height: 75px;
position: relative;
}
.container {
position: absolute;
width: 250px;
height: 75px;
display: table;
}
.container p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
For a purely HTML/CSS solution, try using a table and vertical-align: middle in the table cell.
http://jsfiddle.net/3zLcT/
If you can only use css, I'm afraid you're out of luck.
adding display: table-cell might work, as vertical-align is meant, more or less, for table data
I got a problem with CSS styling of a page.
Basically I have a div that will be used as a dialog in which I'd like to organize the content in 2 columns: the first one could contain a long list of elements, and should be scrollable, the second one should be small and in a fixed position. Thus I don't want all the dialog content to be crollable but just the half of it.
I put toghether an example here on jsfiddle in case you need to do some try... the code is:
CSS
#container {
border: 1px solid black;
height: 200px;
}
#main {
display: table;
border: 1px dashed blue;
height: 200px;
}
#row{
display: table-row;
height: 200px;
}
#leftPanel{
display: table-cell;
width: 50%;
height: 200px;
overflow: auto;
border: 1px dotted red;
}
#rightPanel{
display: table-cell;
width: 50%;
vertical-align: top;
height: 200px;
}
HTML
<div id="container">
<div id="main">
<div id="row">
<div id="leftPanel"> <!-- This one should be scrollable -->
<!-- Long list of element here-->
</div>
<div id="rightPanel">
<div style="height: 50px;">
Something here
</div>
<div style="height: 50px;">
Something else here
</div>
</div>
</div>
</div>
</div>
How can I get leftPanel to be scrollable?
As you can see I tried even setting a fixed height of every component of the CSS table, but without any result... what's wrong here?
Like this: http://jsfiddle.net/Zw8WK/10/
Using overflow-y: scroll or alternately overflow : scroll
Now if you need the height of the left column to be some kind of variable height it might be more tricky, here I am setting it to the height of the parent container.