How can I center 2 pictures, one after another? Every picture has a description that stands at the right of the picture.
CSS
.message-icon_description {
text-align: left;
font-size: 15px;
color: #606060;
opacity: 1;
}
.left-logo img {
float: left;
margin: 15px 15px 15px 0px;
}
HTML
<div class="message-icons">
<div class="left-logo">
<img src="./images/blue.png" alt="blue-message-logo">
<div class="message-icon_description">
<p>Description1</p>
</div>
</div>
</div>
<div class="message-icons">
<div class="left-logo">
<img src="./images/yellow.png" alt="yellow-message-logo">
<div class="message-icon_description">
<p>Description2</p>
</div>
</div>
</div>
This is what I've tried by now, but it's not working well, it shows me picture1_description1 picture2_description2 as I want, but they are not centred, they begin from the left. Any suggestions?
Is this what you are trying to achieve?
.message-icon_description {
text-align: left;
font-size: 15px;
color: #606060;
opacity: 1;
}
.left-logo {
display:flex;
}
.left-logo img {
//float: left;
margin: 15px 15px 15px 0px;
}
.container {
display:flex;
}
<div class="container">
<div class="message-icons">
<div class="left-logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwy9x2ChZ-mbHy-lx9ZPRe5ZhIk3SLHCMBVzMaiTlg_3bSIOAn6fC3Wjk" alt="blue-message-logo">
<div class="message-icon_description">
<p>Description1</p>
</div>
</div>
</div>
<div class="message-icons">
<div class="left-logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwy9x2ChZ-mbHy-lx9ZPRe5ZhIk3SLHCMBVzMaiTlg_3bSIOAn6fC3Wjk" alt="yellow-message-logo">
<div class="message-icon_description">
<p>Description2</p>
</div>
</div>
</div>
</div>
It sounds to me as though you're looking to display the images next to each other, centralised, with their descriptions underneath. To achieve this, you're looking to create a container for the messages which has text-align: center, in addition to making .message-icons display as inline-block:
.message-container {
text-align: center;
}
.message-icons {
display: inline-block;
}
<div class="message-container">
<div class="message-icons">
<div class="left-logo">
<img src="http://via.placeholder.com/100" alt="blue-message-logo">
<div class="message-icon_description">
<p>Description1</p>
</div>
</div>
</div>
<div class="message-icons">
<div class="left-logo">
<img src="http://via.placeholder.com/100" alt="yellow-message-logo">
<div class="message-icon_description">
<p>Description2</p>
</div>
</div>
</div>
</div>
Hope this helps! :)
Related
I try to center pictures in the container. I've set left and right margin to 0 and still something is not working right.
#navbut {
width: 100%;
background: red;
margin: -7px 0 0 0;
color: white;
}
.container .box {
display: inline-block;
width: 10%;
margin-left: auto;
margin-right: auto;
}
.box img.Newspaper_pic {
width: 50%;
margin-left: auto;
margin-right: auto;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
What I am doing wrong that I cannot center pictures in one line?
If your images are set to inline-block, you have to use
text-align:center;
. If your images are set to block,
margin: 0 auto;
will work.
Looks like your pictures are centered, but only within the .box divs, you have to center those .box divs in the .container aswell. The .container also needs to be width 100% so it spans over the whole #navbut.
Try to use flex. flex is very easy to make for these kind of layouts because of these alignment properties.
Reference Link flex
Stack Snippet
body {
margin: 0;
}
.container, .box {
display: flex;
justify-content: center;
}
.Newspaper_pic {
display: block;
max-width: 100%;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
Put whatever you want inside the center tags, e.g:
<center>
<img src="" alt="">
</center>
Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.
I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached.
It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #9653DA;
font: 600 14px sans-serif;
}
.nav-table {
display: table;
text-align: center;
}
.nav-row {
display: table-row;
}
.nav-col {
display: table-cell;
}
.text {
margin: 1em;
}
.icon {
display: inline-block;
border-radius: 100%;
border: 2px solid;
min-width: 10px;
padding: 0.5em;
margin: 0.5em;
}
.icon div {
position: relative;
height: 0;
padding: 50% 0;
top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
<div class="nav-table">
<div class="nav-row">
<div class="nav-col">
<div class="icon">
<div>20</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>300</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>50</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>1</div>
</div>
</div>
</div>
<div class="nav-row">
<div class="nav-col">
<div class="text">Japanese</div>
</div>
<div class="nav-col">
<div class="text">Main Course</div>
</div>
<div class="nav-col">
<div class="text">Non Vegetarian</div>
</div>
<div class="nav-col">
<div class="text">Beginners</div>
</div>
</div>
</div>
This works for bigger screen and shows the way I want but on Mobile, "Right Title" overlaps the "Left Title". Left title should go up but Right Title should be below it but instead, it goes on top of the Left Title.
What should I do?
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bg-image.jpg">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
I tried this method too using the bootstrap 3 layout but it didn't work. The "col-x-12" is not being respected:
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bgimage.jpg">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
</div>
</div>
The CSS used is below:
.IdeathonCover {
position: relative;
}
.IdeathonLeftTitle {
position:absolute;
bottom: 10%;
left: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
.IdeathonRightTitle {
position:absolute;
bottom: 10%;
right: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
Anyone knows why this is happening?!
If you are using Bootstrap, as far as I'm aware, there is nothing wrong with using Bootstrap classes within absolute positioned elements. You could try something along the lines of:
CSS:
.IdeathonCover {
position: relative;
}
.IdeathonTitles {
position: absolute;
bottom: 10%;
width: 100%;
}
And your html:
<div class="container-fluid">
<div class="row">
<div class="IdeathonCover">
<img class="img-responsive" src="bgimage.jpg" alt="">
<div class="IdeathonTitles">
<div class="col-md-6">
<h1 class="text-center">Left title</h1>
</div>
<div class="col-md-6">
<h1 class="text-center">Right title</h1>
</div>
</div>
</div>
</div>
</div>
try adding this in the end of your css file-
#media (min-width: 320px) and (max-width: 750px){
.IdeathonLeftTitle { right: 0; }
.IdeathonRightTitle { left: 0; top: 67px; }
}
it should help.
The best way to describe what I want to do is using this image. As you can see I have 3 different images as background (which are three different Divs) and I want to insert 3 List Points (here named as: "LV", "RP", "IP") with a centred description/heading below (here as: Lv: 15, RP: 16975 and so on).
My biggest problem is to handle the centred width of those elements. I have no idea how to solve this the best way regarding the CSS.
My HTML:
<div class="package">
<div class="item-description">
<div class="col-md-3"><span class="title">LV</span><span class="description">15</span></div>
<div class="col-md-3"><span class="title">RP<span><span class="description">16975</span></div>
<div class="col-md-3"><span class="title">IP<span><span class="description">40000</span></div>
</div>
</div>
Are you looking for something like this?
It's using quite a few elements (which could possibly be converted into pseudo elements), but it shows a general overview of what you might be looking for.
Also, with the id's and classes this shouldn't make it too hard to alter for your needs.
.container {
width: 32%;
height: 200px;
background: red;
display: inline-block;
}
.container .title {
margin-top: 100px;
width: 32%;
height: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
}
#one {
background: url(http://placekitten.com/g/300/300);
}
#two {
background: url(http://placekitten.com/g/200/200);
}
#three {
background: url(http://placekitten.com/g/300/200);
}
<div id="one" class="container">
<div class="title">200
<div class="desc">I'm a very long description</div>
</div>
<div class="title">300
<div class="desc">desc</div>
</div>
<div class="title">400
<div class="desc">Be More Dog</div>
</div>
</div>
<div id="two" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">I'm a tree.</div>
</div>
<div class="title">400
<div class="desc">What is a description?</div>
</div>
</div>
<div id="three" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">a description of what?</div>
</div>
<div class="title">400
<div class="desc">Don't you like, er, trees?</div>
</div>
</div>
this might also work:
Note: I've used a pseudo effect here, but to keep my code 'minimal', rather than applying it to individual items (as you would for individual descriptions), i've just used an existing item.
html,
body {
margin: 0;
padding: 0;
}
.sec {
width: 33%;
height: 200px;
background: red;
background: url(http://placekitten.com/g/200/200);
position: relative;
text-align: center;
color: white;
vertical-align: middle;
display: inline-block;
line-height: 200px;
margin-left: -0.5%;
}
.col {
width: 32%;
margin-left: -0.5%;
font-size: 25px;
display: inline-block;
position:relative;
}
.col:after{
padding-top:25px;
font-size: 10px;
position:absolute;
content:"description";
left:25%;
}
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
Try this in your css
.description, .title{float:left; width:100%; text-align:center;}
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.