I am trying to put two boxes (div) side to side, and I noticed they get misaligned when one contains text and the other is empty (in my case it contains )
HTML
<table>
<tr>
<td align="center">
<div id="tab2">1</div>
<div id="tab3"></div>
</td>
</tr>
</table>
CSS
#tab2, #tab3 {
width: 460px;
min-height: 300px;
display: inline-block;
border: #BCC6CC 2px solid;
}
Codepen link
Hello please use vertical-align: top; to make them align vertically in one line
#tab2, #tab3 {
width:460px;
min-height:300px;
display:inline-block;
border:#BCC6CC 2px solid;
vertical-align: top;
}
CODEPEN
Agree with #Szymon Dziewoński and also you can use this
#tab2, #tab3 {
width:460px;
min-height:300px;
display:inline-block;
border:#BCC6CC 2px solid;
float: left;
margin-left: 5px;
}
Related
What's the default css of a td which makes it so that stuff are automatically centered vertically?
I know how to get things to center horizontally given that a div is smaller than its parent with margin: 0 auto but what's allowing a td to center vertically automatically?
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered only horizontally
</div>
</div>
<table height=200 border=1>
<tr>
<td>
I center automatically
</td>
</tr>
</table>
The default css of td elements is display: table-cell. This property, will also accept vertical-align.
So, you might need to set the css:
td {
vertical-align: middle;
}
.outer {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 60%;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
<table height="200" border="1">
<tr>
<td>I am vertically centered</td>
</tr>
</table>
<div class="outer">
<div class="inner">
This is vertically centered
</div>
</div>
vertical-align: inherited;
for TD & TR in user agent stylesheet i.e default browser stylesheet. So TD is referring vertical-align of TBODY which is as below and thats causing it to align vertically in middle.
vertical-align: middle;
To override, default stylesheet you can do something like
td{
vertical-align: top !important ;
}
#outer{display:table-cell;}
#inner{vertical-align:middle;}
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.
Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle
You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo
you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin
This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>
Here is an example - http://jsfiddle.net/Xb4gV/
My problem is that I want to have the 2 tables to the left centered as the 3rd table on the right will increase in size(grid view). I would like them centered. How can I do this?
Not entirely sure on what your trying to accomplish, but you can give this a try. Going off of what you said you want all tables to be left aligned and centered in the middle of the page but you want the third table to be able to be revisable with no size restrictions, correct? If so this will work:
HTML:
<div class="wrapper">
<div class="center">
<table id="t1">
<tr>
<td>
text
</td>
</tr>
</table>
<table id="t2">
<tr>
<td>
text
</td>
</tr>
</table>
<table id="t3">
<tr>
<td>
text</br>
text</br>
text</br>
Resizable and centered
</td>
</tr>
</table>
CSS:
.wrapper{
clear: left;
float: left;
left: 50%;
margin: 0;
padding: 0;
position: relative;
text-align: left;
}
.center{
float: left;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#t1{
border: 1px solid black;
float:left;
}
#t2{
border: 1px solid black;
float:left;
}
#t3{
border: 1px solid black;
float:left;
}
You can add text to any of the tables cells and it will always re-size and center itself.
Hi you just add width of your parent div as like this
#wrapper{
vertical-align:top;
margin: 0 auto;
overflow:hidden;
width:200px;
border:solid 10px red;
}
Live demo is here http://jsfiddle.net/Xb4gV/57/
I want to center (center+middle) an image, and the title inside h2, in a table column (td)
CSS
.centered
{
text-align:center;
}
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td class="centered"><%= image_tag(prank.image_url, :size => "50x50") %></td>
<td class="centered"><h2><%=prank.category.titleize%></h2></td>
</tr>
I'm using Twitter Bootstrap
You could try:
.centered { vertical-align:middle; text-align:center; }
.centered img { display:block; margin:0 auto; }
check this out http://jsfiddle.net/k6Nvk/1/
just add in your <td> >> <td align="center" valign="middle"><image path></td>
and you can also do this using css check DEMO
Try
.centered{width: 50px; margin: 0px, auto, 0px, auto;}
All you have to do is declare margin from left and right (top and bottom optional):
.center {
margin-left: 25%;
margin-right: 25%;
}
Or you can just use
.center
{
margin-left: auto;
margin-right: auto;
width: 20%;
}
If you don't have to just don't use <table> tag. Use <div> instead.
Here is how I did it.
I call the base twitter css file.
than after i call my default css file
in my default file I have this class
.table-center th, .table-center td {
border-top: 1px solid #DDDDDD;
line-height: 18px;
padding: 8px;
text-align: center;
vertical-align: top;
}
then in my table i do this:
<table class="table table-center ....">...</table>
N.B. align="center" is not supported in HTML 5; see http://www.w3schools.com/tags/tag_td.asp
This should work
.cntr
{
margin: 0 auto;
}
<div class="cntr" style="width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
Give this a try, but not 100% sure if it'll work:
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
I would try text-align: center; in inline style="".