Here is my code. Notice that the height of image is bigger than the div which is what I want. What I don't want is that the other div containing text is at the bottom of the image. Is there any way to fix this? Also, I tried margin-bottom to feature_details.
.feature_details {
display: inline-block;
width: 40%;
text-align: left;
margin-bottom: 4rem;
}
.feature_display {
display: inline-block;
width: 50%;
}
.feature_display__img {
width: 100%;
height: auto;
}
<div class="feature_section__feature_left">
<div class="feature_details">
<h3 class="feature_name">Reviews that really matter</h3>
<div class="feature_info">
<p>
Insolvers makes it easy to create rich, high-quality content using
the inbuilt editor.
</p>
<p>
Add images, gifs, and media - draft, experiment, and share with your
peers before scheduling.
</p>
</div>
</div>
<div class="feature_display">
<div class="feature_display__img">
<img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
</div>
</div>
</div>
Add vertical-align: middle; to your image container.
.feature_details {
display: inline-block;
width: 40%;
text-align: left;
margin-bottom: 4rem;
}
.feature_display {
display: inline-block;
width: 50%;
vertical-align: middle;
}
.feature_display__img {
width: 100%;
height: auto;
}
<div class="feature_section__feature_left">
<div class="feature_details">
<h3 class="feature_name">Reviews that really matter</h3>
<div class="feature_info">
<p>
Insolvers makes it easy to create rich, high-quality content using the inbuilt editor.
</p>
<p>
Add images, gifs, and media - draft, experiment, and share with your peers before scheduling.
</p>
</div>
</div>
<div class="feature_display">
<div class="feature_display__img">
<img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
</div>
</div>
</div>
Update You CSS With These Changes
.feature_section__feature_left{
display: grid;
grid-template-columns: repeat(2,minmax(50%,50%));
align-items: center;
}
.feature_details {
display: inline-block;
/* width: 40%; */
text-align: left;
margin-bottom: 4rem;
}
.feature_display {
display: inline-block;
/* width: 50%; */
}
.feature_display__img {
width: 100%;
height: auto;
}
We can also use relative positioning on the details div and push it from the bottom.
.feature_details {
display: inline-block;
width: 40%;
text-align: left;
margin-bottom: 4rem;
position: relative;
bottom: 5rem;
}
.feature_display {
display: inline-block;
width: 50%;
}
.feature_display__img {
width: 100%;
height: auto;
}
Related
Given the following layout:
.half-side {
width: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.leftbox {
margin: 0px auto;
}
.rightbox {
margin: 0px auto;
}
<div class="half-side">
<div class="leftbox">
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div><!--
--><div class="half-side">
<div class="rightbox">
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div>
Here's a Fiddle.
How can I vertically center my images?
As you can see, I've tried vertical-align: middle to no avail. To be frank, I don't really understand why this doesn't work.
I keep seeing this "trick" - and similar approaches using negative transformations - everywhere:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Which causes the images to be pushed halfway off the top of the page.
How do I vertically align the content in my two columns?
In your code, your divs don't have height so it will never know where the vertical center is. The simplest hack is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.
Here's the full code solution:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.half-side {
width: 50%;
height: 100%;
display: inline-block;
text-align: center;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
.leftbox {
margin: 0px auto;
height: 100%;
}
.rightbox {
margin: 0px auto;
height: 100%;
}
<div class="half-side">
<div class="leftbox">
<span class="helper"></span>
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div><!--
--><div class="half-side">
<div class="rightbox">
<span class="helper"></span>
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div>
Vertical centering problems are usually best solved with display: flex. See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
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 am trying to align my .homepagewebsitefeatures DIVs so they show in the center of its wrapper #homepagewebsitefeatures.
I have tried margin-left: auto; and margin-right: auto;, but without much luck.
Here is my code:
.homepagewebsitefeaturescontent {
float: left;
margin-left: 15px;
width: auto;
font-size: 20px;
}
.homepagewebsitefeaturesimage {
float: left;
width: auto;
display: flex;
}
.homepagewebsitefeatures {
display: flex;
align-items: center;
}
#homepagewebsitefeatures {
background-color: rgba(242, 242, 242, 0.7);
padding: 35px;
margin-top: 45px;
clear: both;
overflow: auto;
}
.homepagewebsitefeatures {
float: left;
width: auto;
clear: none;
margin-right: 5%;
}
.homepagewebsitefeatureswrap {
overflow: auto;
}
<div id="homepagewebsitefeatures">
<div class="margin homepagewebsitefeatureswrap">
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/tech-support.png" alt="Website Technical Support">
</div>
<div class="homepagewebsitefeaturescontent">
Technical Support
</div>
</div>
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/edit-website.png" alt="Edit website">
</div>
<div class="homepagewebsitefeaturescontent">
Edit your website
</div>
</div>
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/globe-domain-hosting.png" alt="Globe Hosting & UK Domain Name">
</div>
<div class="homepagewebsitefeaturescontent">
UK domain & hosting
</div>
</div>
</div>
</div>
Try changing #homepagewebsitefeatures to display: flex and use the following CSS attributes for centering content:
align-items: center;
justify-content: center;
If your homepagewebsitefeatures elements are floated. In order to get all of the floated elements centered(horizontally) you are going to want to make their wrapper, homepagewebsitefeatureswrap have auto left and right margins (and display: inline-block) and have their parent container, homepagewebsitefeatures, have text-align: center. Something like so:
# homepagewebsitefeatures {
text-align: center;
}
.homepagewebsitefeatureswrap {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
FIDDLE DEMO
.wrap {
background: lightblue;
text-align: center;
}
.container {
display: inline-block;
background: grey;
margin: 0 auto;
}
.container::before,
.container::after {
content: '';
display: table;
}
.container::after {
clear: both;
}
.float {
padding: 10px;
float: left;
}
.float > span {
background: red;
}
.container {
display: inline-block;
}
<div class="wrap">
<div class="container">
<div class="float"><span>float</span></div>
<div class="float"><span>float</span></div>
<div class="float"><span>float</span></div>
</div>
</div>
I'm having problems trying to take a piece of text, center it on the page, and have an image on the left and on the right of it.
Keep in mind, I'm only allowed to change CSS code for positioning. The HTML is completely right.
Here html code:
<div id="container">
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>
Our restaurant has the best barbecue that you can find at Philadelphia.
We have an amazing team just to serve you, your family, and your friends.
</p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>
And here is my CSS
#container {
width: 75%;
margin: 15px auto 15px auto;
}
* {
background-color: tan;
}
#pic_1 {
position: absolute;
display: inline-block;
float: left;
}
#pic_2 {
position: absolute;
display: inline-block;
float: right;
}
#aboutus {
position: relative;
text-align: center;
height: 275px;
width: 200px;
color: white;
display: inline-block;
left: 275px;
}
div {
border: solid 2px black;
}
The problem I am running into is that the first image is in the right spot, I'm just trying to get the 2nd image to go on the right side. For some reason, it's just not having it. The text is supposed to be centered.
Any help would be greatly appreciate it
I recommend you use flex instead of float, since float is really not meant for layout.
Stack snippet
#container {
width: 75%;
margin: 15px auto;
}
* {
background-color: tan;
}
#container > div:nth-child(2) {
display: flex;
}
#pic_1 {
flex: 1;
}
#pic_2 {
flex: 1;
}
#aboutus {
flex: 1 1 200px;
text-align: center;
height: 275px;
color: white;
}
div {
border: solid 2px black;
}
<div id="container">
<!-- ADD NEW CODE HERE... -->
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>Our restaurant has the best barbecue that you can find at Philadelphia. We have an amazing team just to serve you, your family, and your friends. </p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>
Make them display block and float left
#pic_1 {
display: block;
float: left;
width: 33%;
}
#pic_2 {
display: block;
float: left;
width: 33%;
}
#aboutus {
text-align: center;
display: block;
float: left;
width: 33%;
}
How can I center my h1 tag into the middle of my banner without setting a padding?
HTML
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
CSS
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
}
Can you do something with vertical-align: middle; and display: table-cell; etc?
There's several options, I recommend looking through this - https://css-tricks.com/centering-css-complete-guide/
One option would be: http://jsfiddle.net/dtq7fed3/ which uses a line-height on the container that is the same of the height of the banner.
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
text-align: center;
line-height: 500px;
color: #fff;
}
This only works if the banner height is going to remain stagnant
Using transform, you can position in centrally like so: http://jsfiddle.net/otghf6zo/1/
adding this code will position the title in the exact middle of the containing div regardless of size.
h1 {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can use CSS table like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: table;
text-align: center;
color: white;
}
.bannerContainer {
display: table-cell;
vertical-align: middle;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
Or Flexbox like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>