I'd like to write HTML to align an image caption in the centre relative to the image.
I'd like to align the image and the caption together to the left.
This should be true whatever the width of the containing element.
This is what I have so far:
[unknown containing element]
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<span>Some caption text</span>
</div>
[/unknown]
But it's aligning the caption text centre relative to the containing element.
What do I need to fix?
Thanks!
If you really mean relative to the image, make the caption element as wide as the image, then center the text. To be able to set a width on the caption element it needs to be a block element, so I changed it from to :
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption">Some caption text</div>
</div>
.caption {
width: 200px;
text-align: center;
}
You might set the width with inline CSS if that is easier.
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption" style="width: 200px">Some caption text</div>
</div>
.caption {
text-align: center;
}
You'll need to make the <span> act like a block element.
Take a look at this: http://jsfiddle.net/szNvt/
Center image caption in image
.container {padding:0.1em}
.display-container {position:relative; width:50%}
.display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%)
}
img {width: 100%;}
<div class="container">
<div class="display-container">
<img src="http://lorempixel.com/400/200/sports/10" />
<div class="display-middle">
<p>strikee .. !</p>
</div>
</div>
</div>
Related
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>
I have 3 images that I want to align vertically however I can't seem to get it working properly. My images are split into 3 parts from 1 existing image. You can see slight transitions from one image to the other. What am I missing here?
HTML:
<div id="Wrapper" class="Wrapper">
<div id ="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
</div>
<div id ="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
</div>
<div id ="image-3">
<img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
</div>
</div>
JS Fiddle: https://jsfiddle.net/krvrp7eb/
Why this happens?
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
Change the display from inline to other - add display: block for instance
Change the vertical-align property to top (default is baseline)
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
Example
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
#image-1 img,
#image-2 img,
#image-3 img {
background-color: #00f;
vertical-align: top;
}
.image-1,
.image-2,
image-3 {
display: block;
}
.Wrapper {
vertical-align: middle;
display: block;
}
<div id="Wrapper" class="Wrapper">
<div id="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
</div>
<div id="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
</div>
<div id="image-3">
<img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
</div>
</div>
Add the following to your CSS:
.Wrapper {
font-size:0;
}
JSFIDDLE
just add one css property in this
image-1 img, #image-2 img, #image-3 img
to
float: left;
use position: relative; and use top, bottom left, and right to adjust its position.
The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}
Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.
You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>