I want to align icons, that it look like the picture below. But Flexbox, Grid or tables are not allowed.
The black bars in the picture represents only text. I've tried several things but deleted them because it was not satisfactory. Below is my current code.
What have I to change, to get the Layout in the picture?
Current code:
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Contact */
/* ########################################################################## */
section{
margin: 30px 0;
background-color: #ccc;
}
.headline{
text-align: center;
margin: 30px 0;
padding: 10px;
}
.row > div{
display:inline-block;
}
.social-media-container > div{
display: inline-block;
}
.icon{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>
<body>
<!-- ########################################################################## -->
<!-- Entire Page -->
<!-- ########################################################################## -->
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Contact -->
<!-- ########################################################################## -->
<section>
<div>
<div class="headline">
<span>Lorem ipsum dolor sit: </span>
</div>
<div class="row clearfix">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>1234 – 567 890 123</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>john#doe.com</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>John Doe</p>
</div>
<div>
<p>USA</p>
</div>
<div>
<p>12345 City</p>
</div>
</div>
</div>
<div class="row clearfix">
<div class="social-media-container clearfix">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>facebook.com/johndoe</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>twitter.com/johndoe</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Give with to icons in percentage and vertical-align:top and its parent to text-align:center.
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Contact */
/* ########################################################################## */
section{
margin: 30px 0;
background-color: #ccc;
}
.headline{
text-align: center;
margin: 30px 0;
padding: 10px;
}
.row > div{
display:inline-block;
}
.social-media-container > div{
display: inline-block;
}
.icon{
text-align: center;
}
/*** solution ***/
.iconsFloat{
text-align: center;
}
.iconsFloat .icon{
width:32.5%;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>
<body>
<!-- ########################################################################## -->
<!-- Entire Page -->
<!-- ########################################################################## -->
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Contact -->
<!-- ########################################################################## -->
<section>
<div>
<div class="headline">
<span>Lorem ipsum dolor sit: </span>
</div>
<div class="row clearfix iconsFloat">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>1234 – 567 890 123</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>john#doe.com</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>John Doe</p>
</div>
<div>
<p>USA</p>
</div>
<div>
<p>12345 City</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>facebook.com/johndoe</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>twitter.com/johndoe</p>
</div>
</div>
</div>
<div class="row clearfix">
<div class="social-media-container clearfix">
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Related
I'm trying to add few images next to each other in my website, when I adding the bellow code they are showing bellow of each other not next to each other, how I can fix that?
<div v-if="!isMobile" class="head-carousel">
<head>
<style>
* {
box-sizing: border-box;
}
.columnx {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.rowx::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="rowx">
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Snow" style="width:100%">
</div>
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Forest" style="width:100%">
</div>
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Mountains" style="width:100%">
</div>
</div>
</body>
</div>
Try to use this code, just put out your img link below the img, not creating a new div
<div v-if="!isMobile" class="head-carousel">
<head>
<style>
* {
box-sizing: border-box;
}
.columnx {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.rowx::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="rowx">
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Snow" style="width:100%">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Forest" style="width:100%">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</div>
I am trying to follow a guide to using CSS Grid here: Tutorial. I am not trying to make the same thing.
I have two defined areas: aside and main.
Here is my grid definition:
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside is my left-hand navigation such as Profile, Support, etc. main is obviously the main content area.
When I view the page in Chrome on my laptop, the aside container / grid area takes up 100% of the page, no problem.
When I use Chrome's dev tools and re-size to a mobile view, the aside grid area stops short of the full page, it only displays one or two menu items. The other items are displayed, I can see them if I select all on the page, they are just outside the aside container.
It seems like I need to specify more rows for the content to fit? But that does not sound right because how would I know how many rows I need for varying amount of content?
I tried to use grid-auto-columns: auto; but that didn't help.
Note: I am messing around with media queries although I had the problem before I started doing that so I don't think it's related.
Any help would be greatly appreciated.
Edit
Image of Desktop
Image of Mobile
Here is my full CSS and HTML:
html, body {
height: 100% !important;
}
body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"main";
}
nav {
grid-area: nav;
background-color: pink;
}
aside {
grid-area: aside;
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
grid-area: main;
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside {
display: inline;
}
nav {
display: none;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CarePower.io</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="author" content="CarePower.io" />
<!-- Favicons -->
<link href="" rel="icon">
<link href="" rel="apple-touch-icon">
<!-- Bootstrap CSS File -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
</body>
</html>
You should avoid applying the display grid directly to the body element to avoid having unwanted element considered inside the grid. Then you can simplify the grid-template-rows using 60px auto auto and get rid of the grid-area on the mobile view. You can also consider using min-height:100vh to have full height page and allow the content to grow on small device.
div.body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
min-height: 100vh;
}
nav {
background-color: pink;
}
aside {
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
div.body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas: "aside main" "aside main";
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
nav {
display: none!important;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="body">
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
</div>
<!-- JavaScript Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have the next html strcture that I can't change it https://jsfiddle.net/fLjs43x7/ :
HTML:
<div class="grid-parent">
<div class="something">
<div class="something-else">
<div class="grid-100">
</div>
<!--- .grid-100 -->
<div class="grid-60">
1
</div>
<!-- .grid-60 -->
</div>
<!-- .something-else -->
<div class="grid-60">
2
</div>
<!-- .grid-60 -->
</div>
<!-- .something -->
<div class="grid-30">
</div>
<!-- .grid-30 -->
</div>
<!-- .grid-parent -->
I want to place green div at same level with first blue div. How can I do this? It's possible?
Thank you!
I think I found a solution:
I added
.something {
height: 1px;
overflow: visible;
}
And I change the middle float div:
.grid-606 {
display: inline-block;
float: none;
}
Here is the entire code: https://jsfiddle.net/fLjs43x7/2/
I am using position property;
See this:--
hope it helps.
.grid-parent {
display: block;
width: 1000px;
height: 300px;
position:relative;
overflow: hidden;
background-color: red;
}
.grid-30,
.grid-60,
.grid-100 {
display: block;
float: left;
height: 50px;
margin-left: 10px;
margin-bottom: 10px;
}
.grid-100 {
width: 1000px;
background-color: yellow;
}
.grid-60 {
width: 600px;
background-color: blue;
}
.grid-30 {
width: 300px;
background-color: green;
position:absolute;
left:600px;
top:60px;
}
<div class="grid-parent">
<div class="something">
<div class="something-else">
<div class="grid-100">
</div> <!--- .grid-100 -->
<div class="grid-60">
1
</div> <!-- .grid-60 -->
</div> <!-- .something-else -->
<div class="grid-60">
2
</div> <!-- .grid-60 -->
</div> <!-- .something -->
<div class="grid-30">
</div> <!-- .grid-30 -->
</div> <!-- .grid-parent -->
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
Well, the tittle says it all. How can I center align those 3 thumbnails inside that div?
I've tried many solutions presented at SO and other places on the web but no success.
I'm not a professional in Bootstrap, webdesign or CSS but how can something so simple be so difficult?
Check my problem here
My Bootstrap code:
<div class="row">
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
</div>
My CSS section:
https://jsbin.com/pabebetoqo/edit?html,css,output
You should study up a little bit on flexbox, which is a CSS technology invented for this sort of layout thing. It is actually really simple. I think the following might do the trick.
.row {
display: flex;
justify-content: center;
}
Couldn't you just center the row that contained the three elements via the text-align:center style?
/* This will center all of the content within your row */
.row { text-align: center; }
Or if you wanted to be more specific, just your mask3 elements :
/* Likewise, this would center only the content in your mask3 elements */
.mask3{ text-align: center; }
Example
/* History */
.mask3 {
text-align: center;
}
section#history {
padding-bottom: 0;
}
section#history h1 {
font-size: 3em;
margin-bottom: 1em;
margin-top: 0.5em;
}
section#history hgroup h2 {
margin-top: 1em;
text-transform: capitalize;
}
section#history hgroup h3 {
margin-top: .35em;
font-family: 'Patua One', cursive;
}
section#history .entry-content {
margin: 1em 0 2.5em;
}
section#history .align {
text-align: center;
margin-top: 10px;
font-size: 6em;
}
/* history Image Hover */
.mask3 img {
margin: 0 auto;
max-width: 100%;
display: block;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=80);
opacity: 0.6;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mask3 img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
</div>
</body>
</html>
use the text align css
.mask3 {
text-align: center;
}
Here's how:
<div class="dogs-box">
<img src="url" class="dog" />
<img src="url" class="dog" />
<img src="url" class="dog" />
</div>
And then set:
.dogs-box {
border: 1px solid green;
text-align: center;
}
.dog {
width: 100px;
height: 100px;
margin: 5px;
}
I've created a very simple example which demonstrates exactly what you are trying to achieve: Fiddle