Align multiple images & text horizontally - html

I've searched and tried several different suggestions for this, but nothing is working.
I am trying to horizontally center 3 images with a caption underneath. Pretty new to CSS. Thanks for your help in advance!
#container {
margin: auto;
width: 1190px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.box {
display: block;
margin: 0px;
white-space: nowrap;
}
.box img {
display: inline-block;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
.box p {
position: relative;
width: 100%;
top: 12px;
z-index: 2;
text-align: center;
font-size: 1.5em;
left: 15px;
}
.clear {
clear: both;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 1190px;
}
L:
<div id="container">
<div class="wrapper">
<h3>Heading Here</h3>
</div>
<div class="box">
<a href="#">
<img src="images/features-icon-1.png" alt=" ">
<p>Option 1</p>
</a>
<a href="#">
<img src="images/features-icon-2.png" alt=" ">
<p>Option 2</p>
</a>
<a href="#">
<img src="images/features-icon-3.png" alt=" ">
<p>Option 3</p>
</a>
</div>
<div class="clear"></div>
</div>

You were just missing a container wrapper for your content.
I have added a div to wrap your image, text & link.
Also changes .box img to .box div
That's all you were missing.
#container {
margin: auto;
width: 1190px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.box {
display: block;
margin: 0px;
white-space: nowrap;
}
.box div {
display: inline-block;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
.box p {
position: relative;
width: 100%;
top: 12px;
z-index: 2;
text-align: center;
font-size: 1.5em;
left: 15px;
}
.clear {
clear: both;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 1190px;
}
<div id="container">
<div class="wrapper">
<h3>Heading Here</h3>
</div>
<div class="box">
<div>
<a href="#">
<img src="images/features-icon-1.png" alt=" ">
<p>Option 1</p>
</a>
</div>
<div>
<a href="#">
<img src="images/features-icon-2.png" alt=" ">
<p>Option 2</p>
</a>
</div>
<div>
<a href="#">
<img src="images/features-icon-3.png" alt=" ">
<p>Option 3</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>

Related

how to put the text below the images without {css}

Whenever I'm trying to change .tea to display: block; all the images change their position from being horizontal, to being vertical
How to position it the correct way so the images keep being horizontally aligned and the text will be underneath
.tea {
display: inline-flex;
margin-left: 225px;
padding: 20px;
justify-content: center;
}
.tea h4 {
display: inline-block;
position: relative;
text-align: center;
}
.tea2 {
display: inline-flex;
margin-left: 385px;
}
.tea img {
width: 300px;
height: 200px;
padding: 25px;
border-radius: 15px;
}
.tea2 img {
width: 300px;
height: 200px;
padding: 30px;
}
<div class="tea">
<img class="1" src="https://via.placeholder.com/150">
<h4>Myrtle Ave</h4>
<img class="2" src="https://via.placeholder.com/150">
<h4>Spiced rum</h4>
<img class="3" src="https://via.placeholder.com/150">
<h4>Berry Blitz</h4>
</div>
<div class="tea2">
<img class="1" src="https://via.placeholder.com/150">
<img class="2" src="https://via.placeholder.com/150">
</div>
You should do it like this
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#gallery {
display: flex;
flex-wrap: wrap;
}
#gallery .image-container {
width: 25%;
background-color: lightgreen;
border-radius: 5px;
padding: 5px;
box-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
}
#gallery img {
width: 100%;
}
#gallery .title {
font: bold 24px monospace;
text-align: center;
color: white;
margin: 2%;
}
<div id="gallery">
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 1</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 2</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 3</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 4</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 5</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 6</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 7</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 8</p>
</div>
</div>
You need to change you HTML to support what you want. Use a container wrapper around the image and image text.
Example: https://jsfiddle.net/Lqupmf5s/
<div class="tea">
<div class="img-container">
<img class="1" src="32131">
<h4>Myrtle Ave</h4>
</div>
<div class="img-container">
<img class="2" src="3213">
<h4>Spiced rum</h4>
</div>
<div class="img-container">
<img class="3" src="3213">
<h4>Berry Blitz</h4>
</div>
</div>
.tea {
display: inline-flex;
/* margin-left: 225px; */
padding: 20px;
justify-content: center; }
.tea h4{
display: inline-block;
position: relative;
text-align: center; }
.tea2 {
display: inline-flex;
margin-left: 385px; }
.tea img {
width: 300px;
height: 200px;
/* padding: 25px; */
border-radius: 15px; }
.tea2 img {
width: 300px;
height: 200px;
padding: 30px; }

Inline-block top align issue; blocks seemingly randomly aligned [duplicate]

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>

Cannot get text centered in a div

Could somebody help me with this HTML to make the <h1> and <h2> texts centrify, because I have lost it a bit on this.
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left" style="top: 270 px">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div style="position: absolute; width: 100%; text-align: center">
<h1 style="font-size: 7vw; position: relative; top: 2.5vh">PAGENAME.COM</h1>
<h2 style="font-size: 2.3vw"SLOGAN FOR THE WEBSITE</h2>
</a>
</div>
<div class="pull-right" style="margin-left: 1vw";>
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
Is this what you need?
https://jsfiddle.net/scorpio777/k99ywpng/6/
CSS
h1 {
font-size: 7vw;
position: relative;
top: 0.5vh
}
h2 {
font-size: 2.3vw
}
.container-fluid {
width: 100%;
position: relative;
}
.pull-left {
vertical-align: top;
display: inline;
position: absolute;
left: 0;
}
.pull-right {
height: 215px;
vertical-align: top;
display: inline;
position: absolute;
right: 0;
}
.center {
display: inline;
position: absolute;
width:100%;
text-align:center;
z-index: 2;
}
HTML
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div class="center">
<h1>PAGENAME.COM</h1>
<h2>SLOGAN FOR THE WEBSITE</h2>
</div>
</a>
<div class="pull-right">
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
</div>
Try this:
CSS
.your-element {
display: flex !important;
flex-flow: row wrap !important;
justify-content: center !important;
}

text in front of multiple images

hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->

Footer not displaying columns correctly (CSS)

I am trying to put together 4-column footer. However I am struggling with making the columns and the elements inside of them fully aligned. For some reason the 2nd column comes out lower than the first one. Like this:
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>
Here is my HTML:
Can someone help me figure out why the 2nd column item begins lower than the first column?
Add vertical-align: top to the footer_column class or use inline-table instead of inline-block.
Inline-block elements by default generate spaces in between them and thus the cause of your problem. Learn more about it here: Space between inline-block elements
.footer_column {
display: inline-block; /* or inline-table */
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top; /* Add */
}
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>