For some strange reason, centering divs using margin: 0 auto is not working. My code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Picture Gallery</title>
<link rel="stylesheet" href="css/week7.css">
</head>
<body>
<h1>The Mighty Avengers</h1>
<div class="slide1">
<img src="images/hawkeye.jpg" alt="Hawkeye" />
<img src="images/capmar.jpg" alt="Captain Marvel" />
<img src="images/beast.gif" alt="Beast" />
<img src="images/thor.jpg" alt="Thor" />
</div>
<div class="slide2">
<img src="images/cap.jpg" alt="Captain America" />
<img src="images/ant.jpg" alt="Ant Man" />
<img src="images/vision.jpg" alt="The Vision" />
<img src="images/scar.jpg" alt="Scarlet Witch" />
</div>
</body>
</html>
and CSS:
html {
background-color: gray;
}
h1 {
text-align: center;
}
img {
height: 250px;
margin-left: -20px;
width: 250px;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
}
None of the other instances of this type of centering talked about on Stack have been any help. I've tried this with and without a display type set on the classes, to no avail. Any insight into this would be appreciated.
Firstly margin: 0 auto; is working in your case but the problem is another - The images width is not enough to full fill the container, so if you want to center the images here is a code for it:
img:first-child {
margin-left: 0;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
text-align: center;
}
I guess this is what you looking for:
Working : Demo
HTML: No Change
CSS
html {
background-color: gray;
}
h1 {
text-align: center;
}
img {
height: 250px;
margin-left: -2px; /* So that it resides side by side*/
width: 250px;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 500px; /* As you are having 250px for each image */
}
What is it you are trying to achieve? Your slide divs are centered. I've applied a yellow border to them so that you can see.
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
border:1px solid yellow;
}
I've also updated your img css to make it more responsive so that the images dont wrap onto a second row.
img {
height: auto;
width: 25%;
max-width:250px;
}
https://jsfiddle.net/Lmmb03ck/4/
Hope that helps.
That's because your image is 150px.. and your div is 80% of the document
You can fix it doing a text-align: center; on .slide1, .slide2.
Related
I have used some code from stackoverflow oct 13 by Mark e Haas. The aim is to have two images side by side with a fig caption below them and for the images to respond to the screen size.
The image sizing is working inthe sense that te images stay on the screen as the size shrinks. The issue is with the I have tried amending various parameters but the caption always appears on the left of the image not below it. Before i start invetigating using a grid to place the image in is it possible to have the place itself below the Image preferably in the middle.
Code is below.
<style type="text/css">
<!-- css -->
#content { /* main display pane for all content */
float: left;
/* width: 595px; */
width: 75%;
min-height: 600px;
/* border: 1px solid #ccc; */
margin-left: 1px;
padding: 5px;
padding-bottom: 8px ;
background: #white;
}
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 10;
text-align: bottom;
}
img.make-it-fit {
max-width: 99%;
max-height: 10%;
float: left;
margin: auto;
}
img.make-right {
max-width: 99%;
max-height: 10%;
float: right;
margin: auto;
}
figure {
padding: 4px;
margin: auto;
}
figcaption {
font-style: italic;
text-align: bottom;
}
/Style
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<figure>
<img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
<figcaption>test</figcaption>
</figure>
<figure>
<img class='make-right' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
</figure>
</div</div>
</html>
Try this, i had modified a little bit the HTML but works fine.
.fig_box {
float: left;
width: 50%;
height: fit-content;
position: relative;
}
.make-it-fit {
width: 50%;
}
span.caption {
position: absolute;
top: 100%;
width: 50%;
left: 0;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<div class="figure_content">
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test1</span>
</div>
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test2</span>
</div>
</div>
</html>
I'm working on a personal website highlighting my certifications on a personal website. Part of the ToS to use the images is to place a TM in the upper right corner of each image. I'm having trouble getting the text to align where it needs to be.
This is what I have:
HTML
<div id="imagesMain">
<img src="aplus.png"> TM
<img src="network.png"> TM
<img src="security.png"> TM
</div>
CSS
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 100px;
width: auto;
vertical-align: middle;
}
The end result gives this...
What I'd like is all images in a tight line and a small "TM" in the proper place. Any help would be appreciated.
Wrap your images with a span and then use a pseudo to add the TM in upper right corner
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain span {
position: relative;
display: inline-block;
}
#imagesMain span::after {
content: 'TM';
position: absolute;
top: -4px;
right: -4px;
}
#imagesMain img {
height: 100px;
width: auto;
vertical-align: middle;
border-radius: 50%;
}
<div id="imagesMain">
<span><img src="http://placehold.it/100/f00"></span>
<span><img src="http://placehold.it/100/f00"></span>
<span><img src="http://placehold.it/100/f00"></span>
</div>
Here is the code which will put the logo on the upper right corner for you, here I have used some dummy images you can replace them with your images.
#imagesMain div{
display:inline-block;
position:relative;
}
#imagesMain div > p{
position:absolute;
top:-15px;
right:0;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="imagesMain">
<div> <img src="http://lorempixel.com/100/100/food/1"> <p>TM</p></div>
<div> <img src="http://lorempixel.com/100/100/food/2"> <p>TM</p></div>
<div> <img src="http://lorempixel.com/100/100/food/3"> <p>TM</p></div>
</div>
</body>
</html>
You should wrap images and TM-text in a DIV, make that position: relative, put the TM-text into t span, make that position: absolute with top: 0; right: 0;. For details, see my snippet below.
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 100px;
width: auto;
}
#imagesMain div {
display: inline-block;
position: relative;
height: 100px;
width: auto;
vertical-align: middle;
}
#imagesMain span {
position: absolute;
top: 0;
right: 0;
}
<div id="imagesMain">
<div><img src="aplus.png"><span class="x">TM</span></div>
<div><img src="network.png"><span class="x">TM</span></div>
<div><img src="security.png"><span class="x">TM</span></div>
</div>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
I'm having some trouble floating some elements. I've reproduced an example here.
Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.
If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.
I feel I am missing something obvious here.
Any ideas?
Thanks.
http://jsfiddle.net/xVXPk/15/
Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.
<div id="header">
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
<div class="logo">
<img src="#"/>
</div>
<div class="company-header">
<a title="title" href="index.php"><b>Hello</b></a>
</div>
<div style="clear:both; height:1px; width:99%" ></div>
</div>
#header {
width: 600px;
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
margin-left: 30px;
}
#header .logo img {
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
text-align: center;
width: 200px;
margin: 0 auto;
}
#header .user-header {
float: right;
margin-right: 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
duplicate of this post:
How to align 3 divs (left/center/right) inside another div?
To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.
EDIT: and you need to float:left the div class="company-header" as well: live demo.
Used code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live demo</title>
<style>
div {
border: 1px solid black; /* added */
}
#header {
width: 600px;
height: 60px; /* added */
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
width: 33%;
max-width: 180px;
padding: 5px 30px;
}
#header .logo img {
max-width: 120px;
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
margin: 0 auto;
width: 33%;
text-align: center;
float: left; /* added */
}
#header .user-header {
float: right;
w/idth: 33%; /* de-activated */
max-width: 180px;
padding: 5px 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="#">
</div>
<div class="company-header">
<a title="title" href="index.php">
<b>Hello</b>
</a>
</div>
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
</div>
</body>
</html>
Add class to anchor: <a class="logout" href="#">Logout</a>
css:
#header {
position: relative;
}
.logout {
line-height: 58px; /* Same height as #header */
position: absolute;
top: 0;
right: 30px; /* Same padding-left of logo */
}
DEMO
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .