I have a portfolio website and I'm trying to align the pictures in the center of the page. I've tried
text-align
and
margin
but nothing seems to work. The code and CSS are as follows:
<div class="body">
<div class=responsive>
<div class=image>
<img class="gallery" src="../pics/placeholder.png">
<p></p>
</div>
</div>
and
.body {
text-align: center;
padding-top: 20px;
float: left;
}
.responsive {
padding: 5px;
float: left
}
.gallery {
width: 250px;
height: 250px;
}
Remove float:left from .responsive and add width:100% to .body
Then you don't need float on .body also.
But it all depends how you want to design your page.
Right now the float: left without the set width is messing up your ability to center things.
Are you looking for something like this?
.body {
padding-top: 20px;
float: left;
width: 100%;
}
.responsive {
padding: 5px;
float: left;
width: 100%;
}
.image {
margin: 0 auto;
width: 250px;
}
.gallery {
width: 100%;
height: auto;
}
<div class="body">
<div class="responsive">
<div class="image">
<img class="gallery" src="https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg">
<p></p>
</div>
</div>
</div>
Related
I am attempting to recreate this simple website layout:Website image
Within the header tag, I am having trouble lining up the logo image with the green image with the slogan on it, shown here: failed attempt.
Here is the code I have for that area:
header {
overflow: hidden;
}
.container {
width: 780px;
margin-left: auto;
margin-right: auto;
}
.logo {
width: 347px;
margin-left: auto;
margin-right: auto;
}
.slogan {
background-image: url(images/header-vet.jpg);
padding: 15px;
float: left;
}
Here is the HTML:
<header>
<div class="header_img">
<img src="images/main-logo.jpg" alt="Vetinfo logo">
</div>
<div class="slogan">
Welcome to VetInfo
</div>
</header>
You can use flexbox for that:
header {
overflow: hidden;
display: flex;
flex-flow: row;
}
.container {
width: 780px;
margin-left: auto;
margin-right: auto;
}
.logo {
width: 347px;
margin-left: auto;
margin-right: auto;
}
.slogan {
background-image: url(images/header-vet.jpg);
padding: 15px;
}
<header>
<div class="header_img">
<img src="images/main-logo.jpg" alt="Vetinfo logo">
</div>
<div class="slogan">
Welcome to VetInfo
</div>
</header>
I am trying to create three separate rounded images on the same line. I managed to get two in the correct position but I can't get the last one to move up into the correct line.
.wrap {
width: 100%;
}
.image-left {
content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: 250px;
float: left;
padding-left: 10%;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
height: 250px;
margin-left: auto;
margin-right: auto;
}
.image-right {
content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: 250px;
float: right;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/
<div class="wrap">
<div class="image-left">
<img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
</div>
<div class="image-centre">
<img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
</div>
<div class="image-right">
<img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
</div>
</div>
.wrap {
width: 100%;
display: table;
}
.wrap img {
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.image-left, .image-centre, .image-right {
display: table-cell;
width: 33%;
}
How about using the image tag and wrapping them around a div like this?
.wrap {
width: 100%;
}
.image-wrapper{
width: 33%;
display: inline-block;
text-align: center;
}
.image-wrapper>img{
height:250px;
}
<div class="wrap">
<div class="image-wrapper">
<img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
</div>
<div class="image-wrapper">
<img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
</div>
<div class="image-wrapper">
<img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
</div>
</div>
Float all three of the divs right, make them width: 33.33% and box-sizing: border-box.
This will make three evenly spaced images floated inline.
If you want them all in a neat row you'll have to add float:left; to all of them and or to the .wrap class but you would have to add display:inline; to each image which I think is the best solution. Problem is if the the viewport isn't wide enough it will push to the next line.
.wrap {
width: 100%;
float: left;
}
.image-left {
content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: auto;
max-width: 25%;
padding-left: 10%;
display:inline;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
max-width: 25%;
height:auto;
display:inline;
}
.image-right {
content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: auto;
max-width: 25%;
display:inline;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
You could assign float: left; for all of your images, and then set correct margins.
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.
Here is my code:
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}
.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}
.third img {
float: left;
position: relative;
}
And my html:
<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>
Help please!
I can't comment yet…
Your original code on fiddle
The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:
The modified version (without padding) on fiddle
Now it's not "pulled too far on the left".
What you can do instead, is to add margin:25px; to .third class, like this:
The modified version (with margin) on fiddle
EDIT: A CLEAN REVISITED VERSION:
The HTML code:
<div class="grid">
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/nemo/350/200/1" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/futurama/350/200/6" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/up/350/200/6" />
</div>
</article>
</div>
The CSS code:
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
}
.third {
display:table-cell;
height: 150px;
width: 150px;
padding: 25px;
border-radius:25px;
vertical-align:middle;
background-color:#eee; //added just for test display
}
.third img {
border:none;
width: 100%;
height: auto;
}
The result here on fiddle.
Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.
Please use the updated code I think it will work.
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.third {
display:block;
border-radius: 25px;
}
.third img {
width:100%;
height:auto;
}
Here's a possible correction of your code to you :
See this fiddle
I've changed a little the HTML structure like this :
<section class="home">
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
</section>
It's better for semantic to have section around article and not article around article.
I've simplify the CSS code like this :
section.home {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
article.third {
text-align: center;
float: left;
width: 150px;
position: relative;
padding: 25px;
overflow: hidden;
}
.third img {
border-radius: 25px;
width: 100%;
position: relative;
}
If you use fluid width for container, then use fluid width for padding/margin of article.
In that case, i use fixed width of the container and for padding values.
I am trying to center the rounded image with the text, however I can not succeed to it.
What should I change to my code to do it?
https://jsfiddle.net/zxwz5739/
<div class="col-sm-6">
<div class="team-1-member">
<div class="round">
<center>
<img alt="Team Member" src="http://i.imgur.com/qIKR0Qt.gif">
</center>
</div>
<h2>John Doe</h2>
</div>
</div>
.team-1-member {
text-align: center;
margin-top: 48px;
}
.round {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
margin-bottom: 10px;
}
.round img {
display: block;
min-width: 100%;
min-height: 100%;
}
.team-1 h2 {
margin-bottom: 8px;
}
to .round add: display: inline-block;
For .round, change your margin-bottom: 10px; to margin: 0 auto 10px auto;.
I'd also suggest getting rid of your <center> tags. They're technically not supposed to be used anymore.
You can basically remove your outer div and center and change the image itself to display: inline-block.
New HTML code:
<div class="col-sm-6">
<div class="team-1-member">
<img alt="Team Member" src="http://i.imgur.com/qIKR0Qt.gif" class="round" />
<h2>John Doe</h2>
</div>
</div>
New CSS code:
.team-1-member {
text-align: center;
margin-top: 48px;
}
.round {
border-radius: 50%;
width:150px;
height:150px;
display: inline-block;
}
.team-1 h2 {
margin-bottom: 8px;
}
Result as jsfiddle.