I'm trying to get the text in this div table/columns/rows to be middle aligned with the images corresponding to each sentence. But so far, all it is giving me is more of a top aligned feel. Could anyone help me with this?
CSS:
.div-table {
display:table;
width:776px;
height: auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
/*cellspacing:poor IE support for this*/
clear: both;
}
#image-middle {
vertical-align: middle;
float: left;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
.div-table-row {
display:table-row;
width: 776px;
float: left;
clear: both;
}
.div-table-col-first {
display:table-column;
width:49%;
float: left;
}
HTML:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col-first">
<img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div>
<div class="div-table-col-first">Second Column Headline
<br />
<img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text
<br />
<br />
<img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div>
</div>
<div class="div-table-row">
<div class="div-table-col-first">
<img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
<div class="div-table-col-first">
<img id="image-middle" alt="Pie Chart">Third Image Second Column Text
<br />
<br />
<img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div>
</div>
</div>
Below is a JSFiddle generated by the above markup.
JSFiddle
First, wrap the image and the text separately (http://jsfiddle.net/L9FnJ/) This is to get you started, I'll not clean up all of your code or do all of the work, but this should tell you how to do it.:
<body>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col-first">
<div class="colImg"><img width="50" height="50" id="image-middle" /></div><div class="colText">First Image Text in the first column and sentence</div>
</div>
<div class="div-table-col-first">Second Column Headline<br />
<img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text<br />
<br />
<img id="image-middle" alt="Padlock in a circle"> Second Image Second Column Text </div>
</div>
<div class="div-table-row">
<div class="div-table-col-first"><img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
<div class="div-table-col-first"><img id="image-middle" alt="Pie Chart">
Third Image Second Column Text<br />
<br />
<img id="image-middle" alt="A Cover for a Safe"> Fourth Image First column Text</div>
</div>
</div>
</body>
</html>
Then, in your css, add this:
.colImg, .colText {
display: table-cell;
vertical-align: middle;
}
You definitely need to wrap your text within elements, and see #feitla's comment. I have found that this works:
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
See this previously asked question.
Related
following various online tutorials, I'm trying to make an image gallery which just simply displays square cropped images. It appears to work on the second and third row, but for what ever reason not on the first row? Does anyone know what I might be doing wrong?
.article {
border: 1px solid red;
max-width: 1000px;
}
.gallery {
border: 1px solid blue;
display: flex;
flex-wrap: wrap;
}
.gallery-item {
border: 1px solid red;
flex-basis: 49%;
}
.gallery-item:before {
content: "";
float: left;
padding-top: 100%;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/300x300' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
</div>
</div>
Codepen:
https://codepen.io/pandalism/pen/XWdyJbz
Any direction at all would be great thanks!
The problem is with the 500x750 image. According to the cover documentation:
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You've basically enforced a minimum height using gallery-item:before, but the only dimension that's actually determined is width; if the item has height>width, it will cause the gallery-item to expand. When you put the 500x750 image in any row, you'll see that it expands vertically.
I'd recommend styling the gallery-item to be a square per this answer. Once you have a maximum height enforced, contain should work like you want it to.
YOU CAN USE THIS CODE OF HTML IF YOU ONLY WANT TO DISPLAY SQUARE SIZE IMAGES
<html>
<head>
</head>
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/300x300' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
</div>
</html>
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I have the following code :
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 100px;
}
.pageMainContentRight {
width: 600px;
float: right;
margin-right: 90px;
text-align: justify;
}
.pageMainContentRight a{
color:#000000;
and code :
<div id="pageMainContent">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px"><img alt="" src="image1.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:40px"><img alt="" src="image2.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div><br />
<div class="pageMainContentLeft" style="width:100px; height:150px; padding-top:30px"><img alt="" src="image3.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; text-align:justify;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:34px"><img alt="" src="image4.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; margin-top:-20px"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>Text </span></p>More Text.</div><br />
</div>
Inside the div pageMainContent I want to display 4 pictures with text underneath (in the shape of a box). What is the correct layout in each of the four divs ?
(its left picture then text underneath then horiztonal to that picture its right picture with text underneath - drop a few spaces and repeat for 2 more boxes)
P-----------------------P
T-----------------------T
P-----------------------P
T-----------------------T
P - Picture
T - Text
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="image1.png" />
<div style="width:100px;"><p>Text Here</p></div>
</div>
Also do something similar for the right div. I however recommend you restructure your code to make things easier for you.
<div class="sectionContainer">
<div class="entry" >
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
<div class="entry">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
</div>
If you divide you code into sections, you will have more control of the code.
In my code, divs with sectionContainer class will display as rows because you will not define any floating for it in you css. So by definition, div elements are block elements and they will show as blocks, that is one on top of another.
For class entry, define a float to the left in your css and they will all be aligned from the left.
Make sure the width of .sectionContainer class is wide enough to accommodate two .entry items.
The main issue you had was that you mixed up which things should be left content and right content. I made a very basic method of making a box. You can format it as you wish
<div class="pageMainContentLeft">
<img alt="image1" src="image1.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image2" src="image2.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft">
<img alt="image3" src="image3.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image4" src="image4.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<style>
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 200px;
}
.pageMainContentRight {
width: 200px;
float: right;
}
</style>
HTML
<div class="image1">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<img src="images/img2.png" width="250" height="444" alt="Screen 2"/>
<img src="../images/img3.png" width="250" height="444" alt="Screen 3"/>
</div>
If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline)
What I'm attempting to do is this (with some space between the images):
[image1] [image2] [image3]
[text] [text] [text]
I haven't given the images their own individual class names because the images don't align horizontally to one another.
Add a container div for the image and the caption:
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
http://jsfiddle.net/ZhLk4/1/
Updated answer
Instead of using 'anonymous' div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
figure.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
http://jsfiddle.net/ZhLk4/379/
Best way is to wrap the Image and Paragraph text with a DIV and assign a class.
Example:
<div class="image1">
<div class="imgWrapper">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<p>It's my first Image</p>
</div>
...
...
...
...
</div>
Since the default for block elements is to order one on top of the other you should also be able to do this:
<div>
<img src="path/to/img">
<div>Text Under Image</div>
</div
img {
display: block;
}
I created a jsfiddle for you here: JSFiddle HTML & CSS Example
CSS
div.raspberry {
float: left;
margin: 2px;
}
div p {
text-align: center;
}
HTML (apply CSS above to get what you need)
<div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 2"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
</div>
You can use the HTML5 Caption feature.
Easiest way excpecially if you don't know images widths is to put the caption in it's own div element an define it to be cleared:both !
...
<div class="pics">
<img class="marq" src="pic_1.jpg" />
<div class="caption">My image 1</div>
</div>
<div class="pics">
<img class="marq" src="pic_2.jpg" />
<div class="caption">My image 2</div>
</div>
...
and in style-block define
div.caption: {
float: left;
clear: both;
}
Instead of images i choose background option:
HTML:
<div class="class1">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class2">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class3">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
CSS:
.class1 {
background: url("Some.png") no-repeat top center;
text-align: center;
}
.class2 {
background: url("Some2.png") no-repeat top center;
text-align: center;
}
.class3 {
background: url("Some3.png") no-repeat top center;
text-align: center;
}
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>