Okay, so I thought that the grid was perfectly aligned to the center, only to realise that it was a few pixels out. I completely stripped all of my attempts at centering and looked online but couldn't find anything.
I know I can use CSS Grids, Flexbox etc. but I am trying to learn how to create websites without using any aid. So I can learn the reasoning behind things.
Fiddle:
https://jsfiddle.net/8L9ye7nj/5/
Grid HTML:
<div class="box-wrapper">
<div class="box-container">
<div class="box" id="stethoscope">
<div class="box-label">
<p>Book an appointment</p>
</div>
</div>
<div class="box" id="prescription">
<div class="box-label">
<p>Request a repeat prescription</p>
</div>
</div>
<div class="box" id="group">
<div class="box-label">
<p>Join the Patient Group</p>
</div>
</div>
</div>
</div>
Grid CSS:
.box {
float: left;
width: 25%;
height: 300px;
background-color: #252625;
color: #FFF;
position: relative;
padding: 15px;
margin: 0.5%;
}
.box-label {
position: absolute;
bottom: 0;
text-align: center;
background-color: rgba(0,0,0,0.5);
width: 100%;
padding: 7px 0;
left: 0;
}
.box-label:hover {
animation: box-stretch 1s forwards ease-in-out;
cursor: pointer;
}
.box-container {
width: 90%;
}
.box-container::after {
content: "";
clear: both;
display: table;
}
.box-wrapper {
background-color: #B21645;
padding: 30px;
}
How can you divide the box and center them?
You can use calc to use mathematical expressions to calculate height, widths etc in css. You can divide the width by three here for the box.
.box {
display: inline-block;
width: calc(100% / 3);
}
Things to consider
Mind the space between inline-block elements. You can read more about
that here.
Avoid using floats as much as possible. Most layouts done with float can be achieved with inline-block. Floats are simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
box-wrapper and box-container either one is only needed to wrap the contents inside.
Code Snippet
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box-wrapper {
background-color: #b21645;
padding: 20px;
}
.box {
position: relative;
display: inline-block;
width: calc(100% / 3);
padding: 0 10px;
height: 300px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
.box-label {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
text-align: center;
background-color: rgba(0, 0, 0, .6);
padding: 10px 0;
transition: padding 0.3s;
}
.box-label:hover {
padding: 25px 0;
}
.box-label p {
font-family: Helvetica;
color: white;
font-size: 20px;
}
<div class="box-wrapper">
<div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="" />
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div>
</div>
How can I center align (horizontally) an image inside its container div?
Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
Output:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>
I just found this solution below on the W3 CSS page and it answered my problem.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html
This also would do it
#imagewrapper {
text-align:center;
}
#imagewrapper img {
display:inline-block;
margin:0 5px;
}
The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
You can then apply the CSS class you created to your tag as follows:
HTML
<img class="center" src="image.jpg" />
You can also inline the CSS in your element(s) by doing the following:
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.
This is what I ended up doing:
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.
I am going to go out on a limb and say that the following is what you are after.
Note, the following I believe was accidentally omitted in the question (see comment):
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
So what you need is:
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
http://jsfiddle.net/userdude/XStjX/3/
yeah, the code like this work fine
<div>
<img/>
</div>
but just to remind u, the style for image
object-fit : *depend on u*
so the final code be like Example
div {
display: flex;
justify-content: center;
align-items: center;
}
div img {
object-fit: contain;
}
<div style="border: 1px solid red;">
<img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;" />
</div>
Add this to your CSS:
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
Just referencing a child element which in that case is the image.
To center an image horizontally, this works:
<p style="text-align:center"><img src=""></p>
Put the picture inside a newDiv.
Make the width of the containing div the same as the image.
Apply margin: 0 auto; to the newDiv.
That should center the div within the container.
Use positioning. The following worked for me... (Horizontally and Vertically Centered)
With zoom to the center of the image (image fills the div):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
Center a image in a div
/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
I have tried a few ways. But this way works perfectly for me
<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Put an equal pixel padding for left and right:
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
A responsive way to center an image can be like this:
.center {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
you can align your content using flex box with minimum code
HTML
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
CSS
.image-container{
width:100%;
background:green;
display:flex;
.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
js fiddle link https://jsfiddle.net/7un6ku2m/
If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"
<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */
.document {
align-items: center;
background-color: hsl(229, 57%, 11%);
border-radius: 5px;
display: flex;
height: 40px;
width: 40px;
}
.document img {
display: block;
margin: auto;
}
<div class="document">
<img src="./images/icon-document.svg" alt="icon-document" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---\/--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---/\--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>
##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Style.css
img#center-img{
display: block;
margin: auto;
}
Html
<html>
<body>
<div>
<img src='pic.png' id='center-img'>
</div>
</body>
</html>
To center a image use this css. You have to give width at first of the image.
img{
width: 300px;
position: fixed;
left0;
right:0;
}
I have a simple question which I can't seem to solve.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1">Point 1
</div>
<div id="tps_point2">Point 2
</div>
<div id="tps_point3">Point 3
</div>
</div>
The idea is that there are 3 images side by side, and when the mouse hover's over each image, the image changes to a highlighted one, and the image is clickable too, so that the user is taken to some other place when the image is clicked.
I have managed to apply the hover effect, but I can't get the linking to work.
Can someone help me out ?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/
If you're able to change the HTML, just lose the inner div tags and apply exactly the same styles to the links themselves:
<div id="tps_block">
Point 1
Point 2
Point 3
</div>
Updated jsFiddle: http://jsfiddle.net/Fjmnt/7/
Best solution if you are unable to modify the HTML.. add the following CSS.
#tps_block a {
display: block;
width: 100%;
height: 100%;
}
This will fill <a> making the entire div clickable.
jsFiddle demo
<div id="tps_block">
<div id="tps_point1"></div>
<div id="tps_point2"></div>
<div id="tps_point3"></div>
</div>
#home-slider should be perfectly centered behind all other divs within #home. margin and padding don't seem to work, as #home-slider remains at the top, left side of it's parent div. How else can I bring it down and centered? Or rather, what have I missed?
jsfiddle
live site
html
<!-- language: lang-html -->
<div id="home">
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
<div class="logo">
<h1><img src="http://lorempixel.com/232/232" alt="logo" id="logo" /></h1>
</div><!-- end logo -->
<div id="slider_mask">
<div class="slide_container">
<div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
<div class="slide"><p>is the maker + doer for makers + doers</p></div>
<div class="slide">
<ul>
<li>No items.</li> </ul>
</div>
</div>
<div class="left_button"></div>
<div class="right_button"></div>
</div>
</div><!-- end home -->
css
#home-slider {
top:0;
height:100%;
left:0;
position:fixed;
z-index:-9999;
}
#home .logo {
padding-top: 215px;
margin: 0 auto;
width: 232px;
}
#home #slider_mask {
width: 600px;
margin: 0 auto;
padding-top: 60px;
position: relative;
overflow: hidden;
}
#home #slider_mask .left_button {
float: left;
display: block;
width: 23px;
height: 25px;
background: url(img/left-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .left_button:hover {
background: url(img/left-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide_container {
float: left;
font-size: 120%;
text-align: center;
width: 300px;
}
#home #slider_mask .right_button {
float: right;
display: block;
width: 23px;
height: 25px;
background: url(img/right-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .right_button:hover {
background: url(img/right-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide {
float: left;
display: block;
text-align: center;
}
I understood you want #home-slider behind all others, and the others centered. Like adaam says "inline stylings on the HTML element defining the #home-slider div as having a relative position whilst in your CSS you had it set as absolute positioning. The inline had overrided the external stylesheet stylings"
I also added a few other css attributes here.
the HTML should be:
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
It's because you had inline stylings on the HTML element defining the #home-slider div as having a relative position whilst in your CSS you had it set as absolute positioning. The inline had overrided the external stylesheet stylings
Here is an updated fiddle: http://jsfiddle.net/dsZSE/10/
This is what your #home-slider code should look like:
#home-slider{
top:0;
height:100%;
left:0;
background-image:url('http://lorempixel.com/g/840/420');
background-repeat:no-repeat;
background-size:cover;
position:fixed;
z-index:-9999;
}
I have a very simple bit of code that should effectively swap out images on hover. The main img is grey, and the :hover img is green. I can see that the green :hover img appears on hover, but it's behind the main grey one. How can I make this work so that the grey is not visible on :hover?
html
<div id="header">
<a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>
css
#header {
height: 40px;
padding-bottom: 40px;
padding-top: 80px;
vertical-align: middle;
width: 960px;
}
#header .logo {
display: block;
float: left;
width: 185px;
}
#header .logo:hover {
background: url('img/logo_hover.png') no-repeat;
}
Modified CSS:
#header {
height: 40px;
padding-bottom: 40px;
padding-top: 80px;
vertical-align: middle;
width: 960px;
}
#header .logo {
display: block;
float: left;
width: 185px;
height: 40px; /*added*/
}
#header .logo:hover {
background: url('img/logo_hover.png') no-repeat;
}
/*added*/
#header .logo img {
display: block;
}
#header .logo:hover img {
display: none;
}
that's because the classes are messed up.. here is an example of a button that has nothing in text but the source is set up from css // it also gives the hover effect from css:
.SubmitClass
{
background-image: url('../Images/Submit.jpg');
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 100px;
height: 30px;
cursor: pointer;
cursor: hand;
}
.SubmitClass:hover
{
background-image: url('../Images/SubmitHover.jpg');
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 100px;
height: 30px;
cursor: pointer;
cursor: hand;
}
You see one image behind the other because you are setting a background image for an image in content. For an image to be swapped out through hovering over it, you should either set BOTH images in CSS or both in content (and handle the swapping using JavaScript/JQuery).
<div id="header">
<a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>
In the above html you set an image as content.
You probably can't/don't want to output CSS dynamically using PHP so its more likely you should output both images and toggle their visibility
<div id="header">
<a class="logo" href="#"><img class="defaultImage" src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" />
<img class="hoverImg" src="<?php bloginfo('template_url');?>/img/logoHover.png" alt="logo" /></a>
</div>
and toggle the images with the following JQuery
$(document).on({
mouseenter: function() {
$('.hoverImage').show();
$('.defaultImage').hide();
},
mouseleave: function() {
$('.hoverImage').hide();
$('.defaultImage').show();
}
}, 'a.logo');
Alternatively, specify both background images using CSS as per Nathans answer.