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.
Related
How do I add all the texts and buttons to display on the background img not below it?
Using Bootstrap 5.
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="img/Landing.jpg" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
CUSTOM CSS
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
background-image: url('img/Landing.jpg');
min-height : 100%;
min-width : 100%;
background-size: 100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
/* BG IMAGE*/
.landingPageBack {
background-image: url('https://images.unsplash.com/photo-1637593755675-c38c18661a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80');
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="landingPageBack">
<div class="vh-100 vw-100 d-flex justify-content-center align-items-center">
<div class="text-center text-white">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->
Please check the code, Hope it will help you.
Here are some links you should go through:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport
Make the wrapped container div position: relative. Then you can place the image inside and a text Block element. The text-blockelöement must be position: absolute. With the css attribute top and left, bottom, right you can position the text on the image.
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: red;
font-size: 5rem;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://via.placeholder.com/500/green" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
And for your example, you would only have to adjust your two classes a bit.
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
position: relative;
}
.text-center {
position: absolute;
top: 50%;
left: 40%
}
.landingPageBack {
background-image: url('https://via.placeholder.com/500/green');
background-repeat: no-repeat;
background-size: 100%;
}
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="https://via.placeholder.com/500/green" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
I'm working on a specific layout using Bootstrap 5 and attempt to render a tag outside his original container, taking the full page width.
I tried using absolute position on the img tag, however, doing this, footer is going over the tag which is not expected.
More than words, this is what I trying to do
The ideal DOM structure would be as follow :
<article>
<header>
<div>
<img />
<h3 />
</div>
<div class="meta" />
</header>
<div class="content" />
<footer />
</article>
img should get full x-width
img should stay in the overal y position (meaning nothing coming after it - should go over it, like a page footer or anything else)
h3 should be over the img tag
any idea would get a warm welcome, I'm trying to make that small thing working since over a week now :')
you're right
my current best attempt it this, so I split the overall structure in three distinct container box, which sounds like a bit hacky to me - and I have issues when it's rendered on mobile (ie: title is going outside down the box, instead staying stick to the bottom of the image)
<body class="position-relative">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
</div>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner d-flex position-relative">
<img style="object-fit: cover;position: absolute;height: 300px;left: 0;right: 0;/*! width: 200%; */" class="w-100" src="...">
<div class="container-fluid container-lg position-relative">
<div class="position-absolute bottom-0 start-0 right-0" style="background: rgba(0, 0, 0, 0.4);">
<h3 class="display-3 p-4">The War of the Worthies: the spectre of Cardan’s aggression</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid container-lg"></div>
<footer class="container-fluid container-lg"></footer>
</article>
</section>
</main>
<div class="container-fluid container-lg">
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee"><div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-39418180; transform: translateX(1084px);" class="js-marquee-wrapper"><div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
However, the render is good https://imgur.com/a/9wBse0Q
My previous attempt was that one, and with that, the marquee box is going inside the article banner. This, and the title is going outside the image which is rendered using a after anchor.
<body class="position-relative customize-support">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner"></div>
<div class="d-flex">
<h3 class="display-3">Change of course for Eskari Industries</h3>
</div>
</header>
<div></div>
<footer></footer>
</article>
</section>
</main>
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee">
<div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-33044180; transform: translateX(1084px);" class="js-marquee-wrapper">
<div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
/*
Theme Name: Galaxy One
Theme URI: https://galaxyone.news
Author: Loic Leuilliot
Author URI: https://github.com/warlof
Description: Galaxy One Gazette default template
Tags: newspaper, rising constellation, game, news
Version: 0.1
Requires at least: 5.0
Tested up to 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or Later
License URI: https://www.gnu.org/Licenses/gpl-2.0.html
Text Domain: galaxyone
*/
#font-face {
font-family: "Gtek Technology";
src: url("./assets/fonts/Gtek Technology.ttf") format('truetype');
font-weight: bold;
}
header h1 {
font-size: calc(1.375rem + 3vw);
font-family: "Gtek Technology", sans-serif;
margin-bottom: 0;
border-bottom: solid 4px var(--bs-primary);
}
.navbar-nav {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.navbar-nav > li {
flex-grow: 1;
}
.navbar-nav .nav-link {
text-align: center;
text-transform: uppercase;
padding: .7rem 1rem;
border-top: 1px solid var(--bs-primary);
border-bottom: 1px solid var(--bs-primary);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: var(--bs-primary);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
color: #fff;
background-color: var(--bs-primary);
}
.go-news .card-img-top {
height: 250px;
object-fit: cover;
object-position: 50% 0;
}
.go-news .stretched-link:hover::after {
background: #282c34dd url("./assets/img/plus-circle.svg") center no-repeat;
background-size: 50%;
transition: background-color 0.5s ease;
}
.go-category-link {
border-radius: 0;
border: none;
padding: 0.5rem;
text-transform: uppercase;
text-decoration: none;
}
.go-category-link.category-sport {
background-color: var(--bs-primary);
}
.go-category-link.category-politics {
background-color: var(--bs-danger);
}
.go-category-link.category-financial, .go-category-link.category-people {
background-color: var(--bs-warning);
}
.go-category-link.category-miscellaneous {
background-color: var(--bs-success);
}
.go-category-link.category-sciences {
background-color: var(--bs-secondary);
}
.page-item {
margin-right: 20px;
}
.page-item:last-child {
margin-right: 0;
}
.page-item:first-child .page-link {
border-radius: 0;
}
.page-item:last-child .page-link {
border-radius: 0;
}
.page-item.disabled .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.page-link {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
}
.page-link:hover {
color: var(--bs-primary);
}
.page-link.dots:hover {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
cursor: default;
}
.go-article-banner {
height: 300px;
}
.go-article-banner::after {
background: #333 url('...') no-repeat center;
background-size: cover;
content: "";
position: absolute;
height: 300px;
left: 0;
right: 0;
}
.go-streaming-news .marquee-wrapper {
background-color: #4472c455;
padding: 0.5rem;
}
.go-streaming-news .marquee {
overflow: hidden;
}
.go-streaming-news .marquee .list-inline-item {
border-right: solid 3px var(--bs-primary);
margin: 0;
padding: 0 0.5rem;
}
.go-streaming-news .marquee .list-inline-item:last-child {
border-right: none;
}
Well, I finally figure a way to do it properly (I think so at least).
Overall reference is this blog post https://css-tricks.com/full-width-containers-limited-width-parents/
I'm using the very last alternative as detailed by "No calc() needed" which is probably the more flexible solution.
First, here is the global DOM structure
<div class="container-fluid container-lg">
<header>
<nav></nav>
</header>
<article>
<header>
<div class="go-article-header">
<div class="go-article-banner" style="background-image: url('...');"></div>
<div class="go-article-title-wrapper">
<h3 class="display-3 m-0">Article title</h3>
</div>
</div>
</header>
<div class="go-article-content">
<p>...</p>
</div>
<footer></footer>
</article>
<footer></footer>
</div>
We have a unique container which is covering the overall page
Inside this container, there are a global header and footer with navigation inside the header
Between both, we have an article, container its own header and footer
The header is containing a few wrapper for extra styling (like background under title, and so on) - I also switched from img tag to a background in order to be able to use cover property. But here again, it's much more a design choice
Now, the styling :
.go-article-header {
height: 300px;
position: relative;
}
.go-article-banner {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
height: 100%;
margin-left: -50vw;
margin-right: -50vw;
background-image: url("assets/img/eskari.png");
background-color: #333;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.go-article-title-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
}
Everything is happening with the .go-article-banner class which is first aligning the tag (using the left and right properties) and then make it start outside the box (using the margin properties). Last but not least, the width property using view width metric is ensuring the tag will use the full screen width.
Regarding title, we just need to fix it left/right/down using parent container. This is done with the .go-article-title-wrapper class.
Here is the final render
I am trying to achieve a result as in the image below.
I have done the border that goes around the div for the card but I don't know how can I put an icon or img on the top border and look interrupted also.
Html code for the Bootstrap 4 card that I am using.
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
Css code
.card-thin-body-v2 {
border: 1px dotted rgba($color: $white, $alpha: .15);
width: 74rem;
padding: 1rem .3rem 1rem 1rem;
margin: 15px 0px 15px 15px;
background-image: url('../../img/cartu-book.svg');
>h2 {
color: $white;
font-family: "adobe-caslon-pro";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
margin-left: 1rem;
>img {
height: 50.66937255859375px;
width: 53.306663513183594px;
border-radius: 0px;
margin: 20px 5px -10px 0px;
}
}
>p {
font-family: "adobe-
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thank you!
Here you go...
Make two divs:
one without border (outer)
one with dashed border (inner)
To move the image up, set margin-top: -2%; to the image. Also, set padding-left: 2%; and padding-right: 2%; to interrupt the border and set the same background-color to the outer div and image (e.g. background-color: gray;), to make the image actually interrupt the dashed border.
#box {
position: absolute;
width: 90%;
height: 90%;
border-radius: 2vw;
background-color: gray;
margin-top: 2.5%;
}
#dashed {
width: 90%;
height: 90%;
border-width: 5px;
border-style: dashed;
border-radius: 2vw;
}
#image {
width: 10%;
margin-top: -2%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='javascript.js'></script>
</head>
<body>
<div class='container-fluid d-flex justify-content-center'>
<div class='d-flex align-items-center justify-content-center' id='box'>
<div class='d-flex align-items-start justify-content-center' id='dashed'>
<img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</div>
</div>
</body>
</html>
I created space between my bootstrap columns using columns insight columns. However, when I start resizing the window, the distance between the columns gets smaller and disappears eventually, both columns start overlapping ech other. How can I keep the space when resizing using bootstrap? Thanks!!!
http://jsfiddle.net/humotrj0/604/
HTML:
<header id="home">
<div class="container-fluid">
<div class="row center-block home_boxes_row">
<div class="col-sm-4">
<div class="col-xs-12 home_box_left">
<p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-12 home_box_right"></div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</header>
CSS:
#home {
height: 1100px;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
width: 100%;
.home_boxes_row {
margin-top: 200px;
.home_box_left {
width: 300px;
height: 300px;
background-color: $green;
padding: 5px;
}
.home_box_right {
width: 300px;
height: 300px;
background-color: $blue;
padding: 5px;
}
}
}
Boostrap is built with responsiveness in mind. Thereby, setting the width of the two columns to a pixel width, will in most cases break the layout. The width should rather be left to be handled by bootstrap.
The following snippets should provide you what you seek.
Spacing is achieved by creating a div inside of the columns, and then setting margins. I have added separate classes for this (.spacing_right and .spacing_left).
I have used Bootstrap 4, but it should work with Bootstrap 3 as well.
Note: bootstrap 4 has replaced the col-xs-* with col-*.
#home {
overflow: auto;
height: 1100px;
width: 100%;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
}
.home_boxes_row {
margin-top: 200px;
}
.home_box_left {
background-color: orange;
margin-top: 5px;
}
.home_box_right {
background-color: red;
margin-top: 5px;
}
.spacing_right {
height: 100%;
margin-right: 25px;
background-color: green;
}
.spacing_left {
height: 100%;
margin-left: 25px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header id="home">
<div class="container-fluid">
<div class="row home_boxes_row">
<div class="col-sm-6 col-6 home_box_left">
<div class="spacing_right">
<p>Test test teasdasdst</p>
</div>
</div>
<div class="col-sm-6 col-6 home_box_right">
<div class="spacing_left">
<p>Test test teasdasdst</p>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
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