I need a set of icons grouped under a div to appear to the right of my logo (which is located on the top-left corner). I need the logo and all icons to have a position of relative. I am using float:left for both divs, but the second div (the group of icons) appears below the logo and not to its right. I have also tried grouping them under an unordered list and input style="float:left" as HTML, but it does not work either.
Here is the CSS:
div.container {
width: 1111px;
}
#parent {
display: flex;
}
.logo {
float: left;
position: relative;
top: 0px;
margin-left: 0px;
}
#icons {
position: relative;
float: left;
white-space: nowrap;
width: 100%;
display: table;
max-width: 100%;
}
.all-icons {
position: relative;
float: left;
vertical-align: middle;
padding: 15px;
display: table-cell;
}
.all-icons img {
height: auto;
width: auto;
max-height: 77px;
max-width: 100%;
margin: 15px;
}
<body>
<div class="container">
<div id="parent">
<div class="logo"> <img src="http://placehold.it/77" width="27%" height="27%"> </div>
<div id="icons" style="float:left" class="all-icons">
<img src="http://placehold.it/77" width="389" height="317">
<img src="http://placehold.it/77" width="451" height="317">
<img src="http://placehold.it/77" width="427" height="317">
<img src="http://placehold.it/77" width="837" height="317">
<img src="http://placehold.it/77" width="594" height="317">
</div>
</div>
</div>
</body>
Is this what you look for?
div.container {
/* width: 1111px; */
}
#parent {
display: flex;
}
.logo img {
margin: 15px;
}
.all-icons {
white-space: nowrap;
}
.all-icons img {
margin: 15px;
}
<div class="container">
<div id="parent">
<div class="logo">
<img src="http://placehold.it/77/f00" alt="">
</div>
<div id="icons" class="all-icons">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
</div>
</div>
</div>
If you can't use flex, try display: table
div.container {
/* width: 1111px; */
}
#parent {
display: table;
}
.logo {
display: table-cell;
}
.all-icons {
display: table-cell;
}
.logo img {
margin: 15px;
}
.all-icons {
white-space: nowrap;
}
.all-icons img {
margin: 15px;
}
<div class="container">
<div id="parent">
<div class="logo">
<img src="http://placehold.it/77/f00" alt="">
</div>
<div id="icons" class="all-icons">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
<img src="http://placehold.it/77" alt="">
</div>
</div>
</div>
Add #icons { text-align: right; }, i think this will help you.
please do remove #parent { display: flex;} and also remove #icons { width: 100% }
It looks in line to me (see below image) however the margins/padding make it look like it's below and to the right.
Other things which may prove useful having seen your code:
display: inline-table
http://flexboxgrid.com/
remembering to keep CSS files as small as possible, not as comprehensive as possible to make it easy to find and fix things
Your image of logo class not in center of its parent. Add
text-align: center;
margin: auto;
into you .logo class
Related
I split my container and put an image in each of them but when I add padding: 0 25px its not creating space between images. So is there any way to put 25px padding between photos/divs?
I tried to put margin and paddings in both html and CSS
* {
box-sizing: border-box;
}
.col-1-3 {
width: 33.333%;
float: left;
padding: 0 25px;
}
.test {
margin: 0 auto;
width: 1700px;
border: 1px solid red;
}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="test clearfix">
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
</div>
The float/clearfix hack shouldn't be used anymore. Use flex or grid to make your layout more "up to date".
Here is a solution with grid that creates a 25px gap between images:
* {
box-sizing: border-box;
}
.col-1-3 img {
display: block;
width: 100%;
}
.test {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 0 auto;
width: 1700px;
}
<div class="test">
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
</div>
This question already has an answer here:
Centre images with text below [duplicate]
(1 answer)
Closed 1 year ago.
Hi Im making a website for a school project and I need the images to be centered in the middle of the page with the text below. Right now the images and text are pushed to the left side. I need the images to be centered in the page and spread out, with the text still below.
HTML
<section class="middle">
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}
This should do the trick.
HTML
<section class="middle">
<center>
<br>
<br>
<br>
<br>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</center>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
padding-left: 100px;
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}
Take a look at following example. This can be comfortable solution for you. Image and Text are wrapped by .wrapper and
flex: 1; basically says, that all wrapper elements should have the same size within .rowone .
.middle {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.rowone {
display: flex;
}
.wrapper {
display: inline-block;
text-align: center;
max-height: 200px;
flex: 1;
}
.text {
background-color: gray;
}
img {
display: inline-block;
}
<section class="middle">
<div class="rowone">
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
</div>
</section>
Try to learn and use CSS Flex Container
Now your parent container .middle will look like this:
.middle{
display: flex; // this will help you align your elements.
justify-content: center; // with the center value, it will align your items at the center of your parent container.
align-items: center; // and this will align your items in the middle of the parent container which is what you're trying to achieve.
}
and you should leave out the float: left on your .rowone items. This is what makes your items be pushed on to the left side of the container.
I have used flex to spread out the images. I think it is the best way to divide a section into columns.
And a simple text align center for centered text.
JSFiddle
HTML
<section class="middle">
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
/*position: relative;
overflow: hidden;*/
display: flex;
justify-content: space-between;
}
.rowone {
/*float: left;
width: 200px;
margin: 1% 1% 45px 1%;*/
text-align: center;
}
.text {
/*position: absolute;
bottom: 0px;
margin: 30px;*/
background-color: gray;
display:inline-block;
}
.rowone img {
width: 100%;
display: block;
}
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center on the container(id: gallery) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
How about styling the image wrapper .images like
.images {
width:80%;
margin:0 auto;
text-align:left;
}
this works
body{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
section{
height:400px;
width:400px;
background:grey;
}
img {
margin:48px;
}
<section>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
</section>
Give your #gallery div a max-width, text-align: center, and margin:auto, then put your header in another div inside the #gallery, but outside the #images. Then put text-align: left on your #images div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
HTML
<h2>HEADER</h2>
<div class="container">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
CSS
h2 {
text-align: center;
}
.container {
float: left;
}
img {
border: medium solid black;
width: 200px;
height: 350px;
margin: 5% 2%;
}
I am having trouble getting my image to rotate. I have tried using the image rotate property in CSS but that doesn't seem to have don the trick. The elements above the image are floated elements. I'm not sure if they might be interfering with the image in some way.
body {
margin: 0;
}
h1,
h2 {
text-align: center;
}
#wrapper {
background: #eee;
max-width: 60%;
margin: 0 auto;
overflow: auto;
}
.float {
align-content: center;
margin: 2.5%;
max-width: 20%;
float: left;
text-align: center;
background-color: #eee;
}
img {
display: block;
margin: 0 auto;
clear: both;
max-width: 70%;
image-orientation: 90deg;
}
<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>
<div id="wrapper">
<div class="float">
<h3>Position 1</h3>
<p></p>
</div>
<div class="float">
<h3>Position 2</h3>
<p>.</p>
</div>
<div class="float">
<h3>Position 3</h3>
<p></p>
</div>
<div class="float">
<h3>Position 4</h3>
<p>.</p>
</div>
<a href="yingCake.jpeg">
<img src="yingCake.jpeg" alt="Image of Ying eating cake">
</a>
</div>
The credit should go to #zsawaf, but to answer this question. Indicated in the comments image-orientation is only for firefox browsers.
Instead in your css file use:
transform: rotate(90deg);
You need to use "transform: rotate()" instead of image-orientation;
So the css for your image should look like this;
img {
display: block;
margin: 0 auto;
clear: both;
max-width: 70%;
transform: rotate(90deg);
}
<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>
<div id="wrapper">
<a href="yingCake.jpeg">
<img src="yingCake.jpeg" alt="Image of Ying eating cake">
</a>
</div>
image-orientation is an experimental feature with limited browser support.
How to make these images stay in center? Here are my css and html codes.
My html code:
<div id="logos">
<div id="q">
<img id="round" src="img/i1.jpg" />
<img id="round" src="img/i1.jpg" />
<img id="round" src="img/i1.jpg" />
</div>
</div>
My css code:
#logos {
display: inline-block;
width:100%;
}
#q{
display: block;
}
#round {
border-radius: 50%;
display: inline;
margin: 0 5px;
width: 150;
height: 150;
position: cetner;
}
#image{
text-align:center;
}
#image img{
margin:0 auto;
}
<div class="image">
<img src="path_to_your_image" alt="">
</div>
Use text-align: center on the parent...
#q{
display: block;
text-align: center;
}
.round {
border-radius: 50%;
display: inline;
margin: 0 5px;
width: 150px;
height: 150px;
}
<div id="logos">
<div id="q">
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
</div>
</div>
Also, ID's must be unique. rounded should be a class not an ID.
Secondly, position: center; doesn't exist in CSS.
And finally, width: 150 and height: 150 must have a unit of measurement (probably px) though this will have no effect because the elements are inline - perhaps you meant inline-block?
Add to #round css:
position: relative;
display: block;
margin: auto;
width: 150px; /*units are needed */
height: 150px; /*units are needed */
The Code
<div class="flex-align">
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
</div>
The CSS
.flex-align {
display: flex;
align-items: center;
justify-content: center;
}