I'm trying to put all my elements to the right side of the page using float: right and the only issue that I'm having is the position of the last paragraph, instead of just being below of top paragraph it goes below and moves to the left.
Here you have a JSFiddle to a better understand of my issue.
https://jsfiddle.net/5782o1hg/1/
<div style="height: 100%">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
<p style="font-size: 20px; float: right; margin: 2px 0 0 0">DreamGlass</p>
<br/>
<p style="font-size: 20px; float: right">Ola</p>
</div>
I just want to put the "World" paragraph bellow of the top one without moving to the left.
The easiest way is put 'World' into the 'Hello' paragraph adding a line break between both words:
<div style="height: 100%">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
<p style="font-size: 20px; float: right; margin: 2px 0 0 0">Hello<br /> World</p>
</div>
CSS grid solution:
.grid {
position: absolute;
right: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.items {
justify-self: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS grid</title>
</head>
<body>
<div class="grid">
<div class="items item-1">DreamGlass</div>
<div class="items item-2">kiwi.svg</div>
<div class="items item-3">Ola</div>
<div class="items item-4">kiwi.svg</div>
</div>
</body>
</html>
text-align right solution
.p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>text-align right solution</title>
</head>
<body>
<div class="wrapper">
<p class="p">paragraph-1</p>
<p class="p">paragraph-2</p>
</div>
</body>
</html>
<div style="height: 100%;">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
<p style="font-size: 20px; float: right; margin: 2px 0 0 0;width:100%;text-align:right;">Hello</p>
<p style="font-size: 20px; float: right;width:100%;text-align:right;">World</p>
</div>
thats all...
You can create "wrapper" <div> and put in your paragraphes
Result on JSFiddle
<div style="height: 100%">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right" />
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px" />
<div style="float:right;">
<p style="font-size: 20px; float: right; margin: 2px 0 0 0">DreamGlass</p>
<br/>
<p style="font-size: 20px; float: right">Ola</p>
</div>
</div>
You could add a negative margin-right to the world paragraph.
<div style="height: 100%">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
<p style="font-size: 20px; float: right; margin: 2px 0 0 0">Hello</p>
<br/>
<p style="font-size: 20px; float: right; margin-right: -50px">World</p>
</div>
Wrap the two paragraphs into a div with style = "float: right;"
Replace <p> tags with <span> and adjust styles in both as needed
<div style="height: 100%">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
<div style="float: right;">
<span style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</span>
<br />
<span style="font-size: 20px; float: right; margin: 2px 4px 0 0">Ola</span>
</div>
</div>
Better you can use flexbox instead of float
<div style="height: 100%; display: flex; flex-direction: column; align-items: flex-end;">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50"/>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50"/>
<p style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</p>
<p style="font-size: 20px;">Ola</p>
</div>
Still not want to use flexbox then just making some changes on your code will do this for you. Remove float and add style "text-align: right;" to the parent. Also add a line break after image
<div style="height: 100%; text-align: right;">
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" /><br>
<img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="margin: 0 0 0 15px"/><br>
<p style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</p>
<p style="font-size: 20px;">Ola</p>
</div>
Related
I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
I'm trying to recreate a chat using images as the messages. The images are of different widths and are in a parent div with a fixed width of 500px. The images are however bigger than 500px, which means that if I scale them down with "max-width: 80%", they do scale down but all to the same width. How can I keep the different widths while scaling them down? Can I achieve that with flexbox? Or with table?
Edit: This is roughly what it should look like:
Here's the snippet of the situation:
.wrapper {
margin: 0 auto;
margin-top: 20px;
width: 500px;
}
.chat {
border: 2px solid #b7b7b7;
}
.chat .chat-header {
width: 496px;
margin-bottom: -2.5px;
position: relative;
}
.chat .chat-history {
padding: 2%;
overflow-y: scroll;
height: 700px;
overflow-x: hidden;
}
.message {
max-width: 80%;
height: auto;
padding: 2px;
}
.float-right {
float: right;
}
<div class="wrapper">
<div class="chat">
<div class="chat-header">
<img class="chat-header" src="https://via.placeholder.com/1280x212"/>
</div>
<div class="chat-history">
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/736x143" width="736" height="143" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/530x384" width="530" height="384"/>
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/591x140" width="591" height="140" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/546x152" width="546" height="152" />
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/561x101" width="561" height="101" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/698x124" width="698" height="124" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/840x203" width="840" height="203" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/824x141" width="824" height="141" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/770x141" width="770" height="141" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/748x139" width="748" height="139" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/725x85" width="725" height="85" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/812x197" width="812" height="197" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/859x189" width="859" height="189" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/740x140" width="740" height="140" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/596x125" width="596" height="125" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/857x109" width="857" height="109" />
</div>
</div>
</div>
</div>
Use several :nth-child(expr) presets with different max-width. expr should be some formula with n so you get repeated patterns of image scaling or some patterns that look random.
Example:
.message-container:nth-child(2n) .message {
max-width: 60%;
}
.message-container:nth-child(2n+1) .message {
max-width: 50%;
}
.message-container:nth-child(3n+2) .message {
max-width: 40%;
}
Set message-container class to divs inside chat-history or use .chat-history > div instead.
https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child
I do have issues with the positioning of my elements within a table-cell.
I do have a headline, an image and a button within my table cell. The images of the table cell are different in height, so I do want the button to be at the bottom.
What i want is in the below:
!Final Table-Cell Layout1
At the moment the buttons/Link text is right after the images...
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>
You can set position: absolute; and bottom: 0; on your button but remember to set the parent element to position:relative in order to use absolute positioning and add a min-height: 300px; to the cell for smaller images.
Here's the full code aligning the hyperlink at the bottom and center. position: absolute will shift it out of it's position and bottom: 0; will pull the element to bottom, but that's not enough since other elements are not positioned well. Adding width: 100%; + margin:0 auto; will horizontally align link.
At last you will have following:
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>
How do I make these photos all go in the center of the webpage? this is my html code
<html>
<body>
<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
If you're trying to center the images horizontally, try this: https://jsfiddle.net/a5u3q1w5/2/
HTML:
<div id="travel_photos">
<img title="branson" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"/>
<img title="branson" src="http://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"/>
<img title="branson" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</div>
CSS:
#travel_photos > img {
width: 300px;
height: 100px;
margin: 0 auto;
display: block;
}
Please try this:
<html>
<body>
<img style="display: block; margin:auto;" title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!
My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
What I would recommend is to make use of flexbox container for the elements.
With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:
display: flex;
align-items: self;
justify-content: center;
Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.
This can be seen in the following, with a border added to showcase the area that the .container element occupies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="container">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Hope this helps! :)
html
<div class="content">
<div>
<img src="facebook.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="twitter.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="instagram.png" alt="" width="75" height="75" />
</div>
</div>
css
.content {
text-align:center;
}
Maybe you can edit the css file, remove the float:left; :
.contain {
max-width:960px;
text-align:center;
}
.social {
position:relative;
display: inline-block;
padding: 10px;
}
<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.
.contain {
max-width: 960px;
text-align: center;
}
.social {
display: inline-block;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Keeping your current code, simply remove the flex: left: (JSFiddle example):
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
padding: 10px;
}
If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):
.contain {
display: flex;
justify-content: center;
}
.social {
padding: 10px;
}
There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.