My template :
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
How do I vertical-middle align the image (the images have different sizes...) and vertical-bottom align the text(different sizes.)
The td height is dynamic.
I'm sorry but position:absolute doesn't work ...the images have different sizes.
What you can do is to have 2 rows in the table.
Row 1 with all the images and Row 2 with the text
for each image add
img {
margin:auto;
}
and for text, align:center.
I think that should do the job.
Use this structure : http://jsfiddle.net/vse8cq5y/
From your given HTML and request I'm assuming this is what you will need to get what you want.
The images should automatically do what you are asking, all you need to do is position absolute the text to the bottom of the td.
By adding padding bottom to the each td, you are allowing space for the text to go, meaning that it will never overlap with your image (regardless of image size).
img {
background-color: red;
display: block;
width:5em;
height:2em;
margin: 0 auto;
}
td {
width:10em;
padding-bottom: 1em;
position: relative;
vertical-align: middle; /*should be default*/
}
.container {
background-color: blue;
display:inline-block;
}
.align-bottom {
position: absolute;
bottom: 0;
left:0;
display: inline;
width: 100%;
text-align: center;
}
<table>
<tr>
<td class="image">
<img src="" style="height: 4em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 7em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 10em">
<div class="align-bottom">
text
</div>
</td>
</tr>
</table>
Related
I'm making a website, and I have to make a panel of images, with a text over each one of them. I made a <table>, but when I added up <p> to every image, they became one column instead of a table.
Making <p>'s position absolute doesn't help at all.
How can I link every <p> to the middle of the image while saving table position?
If you want to use table and not divs, then try something like this - this will center the text over each image in each table cell:
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<table >
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
</table>
</body>
</html>
I wants to align a logo at left end of a div and a text at center of that div(text should be look like at center of screen). The width of div is fit to screen. Both logo and text should be in same line. How is it make possible?I have start like below.But shows two elements as line by line.
<div >
<img id="imglogo" alt="" src="images/ logo.JPG" style="width: 300px;height:75px" />
<h1 align="center" id="H1">Project Name</h1>
</div>
Personally, I prefer table as it places things quite nicely and is reliable. See below:
<table border=1 style="table-layout: fixed; width:100%">
<tr>
<td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
<td style="text-align: center">Centered Text</td>
<td></td>
</tr>
</table>
And of course you can customise to however you wish.
You can do it with flexbox. The Heading will be centered in the space next to the image.
.wrapper {
display: flex;
}
.wrapper>div, h1 {
flex: 1;
}
h1 {
text-align: center;
}
<div class="wrapper">
<div><img src="https://placehold.it/300x75" /></div>
<h1>Project Name</h1>
</div>
One approach is to use absolute in relative positions:
h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}
h1 {
text-align: center;
position: relative;
height: 50px;
line-height: 50px;
margin-bottom: 4px;
}
#imglogo {
height: 50px;
position: absolute;
left: 0;
}
<div>
<h1 id="H1">
<img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
</h1>
Some more text
</div>
I think this achieves the effect you're after. Some notes:
We need to set the line height and height explicitly for the <h1>, so it will be vertically aligned with the logo. This will not work well if the title wraps lines.
On a small screen, the logo and the title overlap. You can define another rule for smaller displays.
You can use bootstrap columns.
img {
max-width: 300px;
float: left;
}
h1 {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-5">
<img class="img-responsive" src="https://placehold.it/300x75" />
</div>
<div class="col-xs-7">
<h1>Project Name</h1>
</div>
</div>
how can I put text beside picture without disturbing the other content?
this is a header
html
<div>
<img src="logo.ico" width="300px" height="200px" alt="logo"/>
<h1 class="header">Movies19</h1>
</div>
you can add the two elements in the div to display:inline-block tag
.line>* {
display: inline-block;
}
h1 {
vertical-align: middle;
height: 200px;
margin: 0;
}
<div class="line">
<img src="http://placehold.it/300x200" width="300px" height="200px" alt="logo" />
<h1 class="header">Mo</h1>
</div>
Use this
<style type="text/css">
img {
display: inline-block;
}
</style>
look at this link it may help more:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_default_css
<div>
<table>
<tr>
<td>
<img src="logo.ico" width="300px" height="200px" alt="logo" />
</td>
<td>
<h1 class="header">Movies19</h1>
</td>
</tr>
</table>
</div>
I have a table with a bunch of the same image in a single row. The image has a height of 21px but the cells of the table have a rendered height of 25px (in Chrome, Safari, and Firefox).
There's nothing else in the table, and from what I can tell, there are no margins, borders, or padding. So why is my table taller than it needs to be?
Here's an example:
http://jsfiddle.net/q6zy17dz/
And here's a simple example of the table:
<table>
<tbody>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</tbody>
</table>
Bonus question: Is there a way to recreate this layout without using a table (and also without using floats)?
By default, an image within a table gets the computed display:table-cell property.
You should set img { display: block; }
You can do it entirely without tables.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
nav {
background-color: skyblue;
position: relative;
text-align: center;
line-height: 22px;
}
.left, .right {
font-size: 0;
position: absolute;
top: 0;
}
.left { left: 0; }
.right { right: 0; }
<nav>
<div class="left">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
<div class="datetime">foo</div>
<div class="right">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
</nav>
It is the line-height property that makes the height of <td> to be 25px. In your example setting a value of 11px or less will make the cells have 21px.
td { line-height:11px;}
Here is jsfiddle.
Because the <img> tag is rendered like an inline element, similarly to letters. There is space below it is for the descenders.
There are few ways to get rid of that space.
Adjust the vertical alignment:
img {vertical-align:top;} /*or*/ img {vertical-align:middle;}
Or, set it as a block element:
img {display:block;}
Or, float it (works in this case, but not recommended):
img {float:left;}
<style type="text/css">
td { border:solid 1px black; margin:0px; padding:0px; }
</style>
<div>
<table>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime">foo</td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</table>
</div>
<br>
<div>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span class="datetime" style="float:left;">foo</span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>
I tried pretty hard to find the answer to this on here, on google, and elsewhere, but it seems pretty obscure. I had to do some fancy CSS in order to create a box with a specific aspect ratio inside which a thumbnail would be centered vertically and horizontally. Those are straight-forward ideas that are actually somewhat complicated to implement in CSS. My solution works great everywhere except inside a table in Chrome with an image that has dimensions larger than the container.
Here is code that demonstrates the issue:
/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio:after {
padding-top: 76.19%;
display: block;
content: '';
}
/*
parent has no height, this fills the container's space
*/
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
/*
centers image horizontally and vertically
background color
*/
.image-background {
text-align: center;
background-color: #444;
height: 100%;
width: 100%;
}
.image-background::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
img {
display: inline-block;
padding: 5px;
box-sizing: border-box;
vertical-align: middle;
}
/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
height: 100%;
}
.fill-width {
width: 100%;
}
/* other styles */
h1, h2, h3 {
text-align: center;
}
table {
width: 100%;
}
.thumbnail-viewer {
width: 40%;
margin: 10px auto;
}
<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
Hopefully as you can see, in Chrome (I'm using 43.0.2357.132 64-bit) and Safari (8.0.7) the tall/large image is exceeding the boundaries of its parent and its height is being set to the natural height of the image. The wide images all work as expected, so this appears to only be an issue of height.
My question: What is a simple or straight-forward way to fix this issue in Chrome and Safari? Or is it a bug and should I look for a less-than-ideal work-around that makes it look less terrible? What is causing this issue?
Thanks!
FYI, on smaller screens (screenwidth < 650px), your first image inside the table breaks as well.
To fix it, change your img to use the absolute positioning centering trick:
img {
padding: 5px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This also means you don't need the image-background::before declaration.
Why do you need .fill-container to have absolute positioning? If I remove the lines below from styles then everything looks fine in Chrome (I can't test in Safari):
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
You also haven't closed img tags, you have
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
instead of (notice /> at the end of line)
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />