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="".
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;}
So, I'm trying to send an email with information from a user. It should look like this:
But for some reason the css won't work in the email, as it looks like this:
The CSS is as follows:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
padding-top: .1em;
padding-right: .25em;
width: 6em;
text-align: right;
float: left;
}
div.block span {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
}
And my HTML:
<div class="block">
<label>Voornaam:</label>
<span>%voornaam%</span>
</div>
<div class="block">
<label>Achternaam:</label>
<span>%achternaam%</span>
</div>
<div class="block">
<label>E-mailadres:</label>
<span>%email%</span>
</div>
<div class="block">
<label>Telefoon:</label>
<span>%telefoon%</span>
</div>
<div class="block">
<label>Toelichting:</label>
<span>%toelichting%</span>
</div>
<div class="block">
<label>Datum:</label>
<span>%datum%</span>
</div>
CSS in emails is still not supported very well. For the layout you want, using a <table> with inline styles instead of a div-based layout would be the best way to achieve it.
If the images is what you need a table would do fine. You can adjust the padding-left to what you think is best for the layout. You can add a margin-left: 10px or something to the table itself to move the table more to the right.
<table class="emailtable">
<tr>
<td>Voornaam:</td>
<td style="padding-left: 40px;">%voornaam%</td>
</tr>
<tr>
<td>Achternaam:</td>
<td style="padding-left: 40px;">%achternaam%</td>
</tr>
<tr>
<td>E-mailadres:</td>
<td style="padding-left: 40px;">%email%</td>
</tr>
<tr>
<td>Telefoon:</td>
<td style="padding-left: 40px;">%telefoon%</td>
</tr>
<tr>
<td>Toelichting:</td>
<td style="padding-left: 40px;">%toelichting%</td>
</tr>
<tr>
<td>Datum:</td>
<td style="padding-left: 40px;">%datum%</td>
</tr>
A few simple modifications in your CSS will fix that:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
padding-top: .1em;
padding-right: 2em;
width: 6em;
text-align: right;
}
div.block span {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
width: 20em;
}
I prepared a jsfiddle as a demonstration: https://jsfiddle.net/zL2ntzdh/
That said I would like to add that using HTML markup in email messages is a questionable thing. Yes, it does make the message look a bit more shiny. But it comes with huge disadvantages: the message size will get multiplied, the chances of your message being considered SPAM is automatically multiplied, you request ultimate trust from the addressees, so you have to expect that many of them will silently delete the message to prevent security issues.
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;
}
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>
I need your help,
The problem that I am having is that my table does not conform to 100% height of my window. How can the HTML coding below be amended to accommodate this change?
<table style="width: 100%; height: 100%; border: solid 1px black;">
<tr>
<td style="text-align: center; vertical-align: middle; padding: 5px; position: relative;">
<p style="display: inline-block; width:100%; background: #ccc; vertical-align: middle;">
Title Text
</p>
</td>
</tr>
</table>
Expected outcome is:
You can also change height:100%; to height:100vh; Check out this EXAMPLE
Try this:
Add to your CSS following code:
html, body {
height: 100%;
}
It's important to expand the html and body first.
After that you can make a <table style="height:100%"> like in the JS Fiddle