I am trying to center the text span in the following table-cell, table-row
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-cell; width:400px;">
<div style="display: table-row; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
jsfiddle ( http://jsfiddle.net/7p3zgne0/ )
table-cell and table-row are inverted.
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
It should probably be like this:
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
Note how the table-cell is inside the table-row. In your code, you have them the other way around.
http://jsfiddle.net/sfcaa3Lk/
<div align="center">
center aligned content (like a span)
</div>
Apply this to your deepest div node
Related
[enter image description here][1]currently i am facing one problem.
I generated table using div with fix header and scrollbar to div row section.
but problem is both div are not taking whole 50% 50% width.
I have tried following code.but not working.
.brd2 {
height: auto;
max-height: 100px;
overflow: auto;
position: absolute;
width: 100%;
}
.back-clr {
background-color: red;
}
HTML PART
<div class="container">
<div class="row">
<div class="col-md-8">
<div style="display: table;width:100%">
<div style="display: table-row">
<div style="width:50%; display: table-cell;">
Test
</div>
<div style="width:50%; display: table-cell;">
test
</div>
</div>
<div class="brd2" style="display: table-row;">
<div class="content" style="width:50%; display: table-cell;">
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
</div>
<div class="content back-clr" style="width:50%;display: table-cell;">
this is second div
</div>
</div>
</div>
</div>
</div>
</div>
we have 4 lines displaying like this in page
we want to move all texts of first column to left & keep all 4 colon[:] in same line
<div class="all-link">
<p>Delivery :</p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p>Parcelled.in:</p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p>DTDC:</p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p>Speed Post:</p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
i am trying with `position : relative & left , right pixels but i need to use lot of code for that.
Check below html, it might help you.
<div class="all-link">
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Delivery <b style="float:right">:</b></p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Parcelled.in <b style="float:right">:</b></p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">DTDC <b style="float:right">:</b></p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Speed Post <b style="float:right">:</b></p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
Ths is really tabular data so an actual table would be best but CSS Tables can manage this with a slight HTML structure change.
Wrap each paragraph and associates span in a div and these wrapper can act as table rows.
.all-link {
display: table;
margin: 1em;
}
.all-link .row {
display: table-row;
}
.all-link .row p,
.all-link .row span {
display: table-cell;
padding: .25em;
border:1px solid lightgrey;
}
.all-link .row p {
text-align: right;
}
<div class="all-link">
<div class="row">
<p>Delivery :</p>
<span>Delivery.com</span>
</div>
<div class="row"><p>Parcelled.in:</p>
<span>Parcelled.in</span>
</div>
<div class="row">
<p>DTDC:</p>
<span>DTDC</span>
</div>
<div class="row">
<p>Speed Post:</p>
<span>Speed Post</span>
</div>
</div>
Is it possible to use some divs and css to make a book cover like the one below(ignore the orange background) with editable titles, most the book covers I checked online don't look like this. I know am probably asking a lot but I would really appreciate any help on this.
Yes.
<div style="width:400px; height:800px">
<div style="display: table; width:400px; height: 100px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle; background-color:blue;">
<h4 style="color:white;text-align:center">
<i style="color:yellow">image</i>Training book header text
</h4>
</div>
</div>
<div style="display: table; width:400px; height: 250px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<h1 style="text-align:center">Training book body text</h1>
</div></div>
<div style="display: table; width:400px; height: 100px;">
<div style="display: table-cell; vertical-align: middle; background-color:grey;">
<h4 style="color:white;text-align:center">
Training book footer text<i style="color:yellow; float:right">image</i>
</h4>
</div>
</div>
</div>
https://jsfiddle.net/457567wy/
I have a two divs it's containing in parent div. first div at left side and second at right.
So, i want a right div at middle of parent with out using margin.
HTML
<div class="clearfix" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
CSS
.inline-block {
display: inline-block;
}
.rfloat {
float: right;
}
.lfloat {
float: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
and here's jsfiddle http://jsfiddle.net/fmr3Y/
This how you can do it
DEMO
HTML
<div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">
CSS
a {
display: table-cell;
vertical-align: middle;
}
Use display:table -- demo
<div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
<div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> Report
Message
Follow
</div>
</div>
You could mimic the flex justify-content with display and text-align:justify : DEMO
.inline-block {
display: inline-block;
font-size:16px;/* do not forget to reset font-size to childs*/
font-size:1rem;
text-align:center;/* left, right, .. */
}
.justify:after {
display: inline-table;
content: " ";
width:100%;
height:0;
vertical-align:top;/* no extra gap please */
}
.justify {
text-align:justify;/* will span element from one side to the other */
font-size:0;/* reduce line-height and avoid gap from pseudo element */
}
HTML updated with class name :
<div class="justify" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
I had Changed Your structure to make Right Div at center
<table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
<colgroup>
<col style="width: 19%"/>
<col style="width: 75%"/>
</colgroup>
<tr>
<td>
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
</td>
<td>
<div style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</td>
</tr>
</table>
Here is Working Demo Too.Working Fiddle
I have the following HTML:
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
</div>
</div>
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 200px;"></div>
</div>
</div>
</div>
</article>
I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?
Here's an example: fiddle
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
You have set the height of second element i.e Height = 100px .
Set the height to both the div elements .
Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 100px;">das</div>
</div>
</div>
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 200px;">das</div>
</div>
</div>
</div>