I need to center vertically floating divs and images to their container. I tried many ways but none works fine.
Something like this
http://codepen.io/catapanoa/pen/ygaKLy?editors=1100
<div class="leftWrapper">
<div class="title">
Title 1<br>
<span class="subtitle">Subtitle 1</span>
</div>
</div>
.
.
.
This is the best way to center content vertically
.vert-center {
margin-top: 50%;
translate: transform-y(-50%);
}
.wrap { position:relative; }
.center {
width:100%;
height:100%;
top:0;
right:0;
left:0;
bottom:0;
display:flex;
position:absolute;
text-align:center;
align-items:center;
justify-content:center;
}
<div class="wrap">
<div class="center">
<div>
<h1>Title</h1>
<span>span</span>
</div>
</div>
</div>
.title
{
border: 1px solid green;
position: relative;
top:50%;
transform: translateY(-50%);
}
Related
I have different images encapsulated in square style blocks that I would like to always center in but I'm having a heck of a time trying to get them to do so.
I made an example of what's happening to me in similar design. Notice the product (the grill) is not actually centered in the imgblock container.
This starts to become very apparent with other product images that are much wider than narrow.
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
First set the image to full width and height (or as desired). Now you can add object-fit: contain to contain the image to the imgBlock and now use object-position: center to align it - see demo below:
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
height:100%; /* set full height */
width:100%; /* set full width */
display:block;
object-fit: contain; /* constrains the image maintaining aspect ratio */
object-position: center; /* default position is center - so optional in this case */
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can use the older positioning attributes as well as the Flex techniques. Make the main block position relative. Then set the img inside that block to position: absolute. Place that block element to top: 50% left: 50% of the parent element. Since this goes by the top left corner it will be slightly of the center. We will then use transform: translate(-50%, -50%) to bring it back to the true center.
More on position here at the MDN.
.imgBlock {
position: relative;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height:100%;
max-width:100%;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can set position relative to your div .imgBlock.
After that set the position absolute to your <img/> with all coordinates to 0 and margin auto.
Remember that a position absolute is referred to the nearest parent with position relative.
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
position:relative;
}
.imgBlock img{
max-height:100%;
max-width:100%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can add display: flex to imgBlock, then center horizontally with justify-content and vertically with align-items.
.imgBlock {
display: flex;
align-items: center;
justify-content: center;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
I have started a huge revision on my css knowledge.
I am trying to do the following:
I want to create a wrapper div that contains to divs with some text and some content.I want each div with class item-2 inside that div to have a width:50%
and appear next to another item-2.
Here is a snippet of my code:
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
text-align:center;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
As you can see it's div appears below its previous div.However I want them to be next to each other.How can I achieve this? I would like an explanation to your solution sa as to improve my knowledge
Flex can keep them in one row.
.wrapper {
display: flex;
}
And remove display: inline block for items. If you want in small devices they are under each other add this to .wrapper
flex-wrap: wrap;
And we need a min-width for items. .items: min-width: 250px;. If your device has enough space (500px) they will remain in one line, else the second item goes to next line.
.wrapper display: flex;
.item-2 flex: 1;
Why is this happening?
Using inline-block in this way is perfectly valid and will work but you have two issues that are causing the elements to occupy separate lines:
inline-block items honour the white-space between elements so there is an extra space between the two .item-2 divs
The width of .item-2 is not 50% but 50% + 2px left border + 2px right border
How to fix
There are multiple ways of getting round the white-space issue including setting font-size: 0;, however, as the height and width of .demo use ems you are probably best removing the white-space from between the elements in the HTML instead
To ensure .item-2 actually has a width of 50% you can add box-sizing: border-box; which will make the width and height include the padding and border
body {
background: rgba(10, 10, 10, .8);
}
.wrapper {
margin: auto;
position: relative;
width: 100%;
}
.item-2 {
border: 2px solid blue;
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 50%;
}
.demo {
background: yellow;
height: 5em;
margin: auto;
width: 5em;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div><!--You can remove the white-space by adding a comment between the elements
--><div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
Try this code...
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
float:left;
text-align:center;
box-sizing: border-box;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
aside float and flex, there's also:
display:table;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:table;
table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
text-align:center;
display:table-cell;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
display:grid;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:grid;
grid-template-columns:50% 50%;
}
.item-2{
text-align:center;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
Currently I am making a page where I have 4 divs each taking 50% width and height.
I would like to make a div where a box can float at the exact center of the page overlapping these elements.
This is the coding so far.
<html>
<head>
</head>
<body>
<div style="background-color:red; width:50%; height:50%; float:left">
</div>
<div style="background-color:blue; width:50%; height:50%; float:right">
</div>
<div style="background-color:green; width:50%; height:50%; float:left">
</div>
<div style="background-color:orange; width:50%; height:50%; float:right">
</div>
</body>
</html>
Absolute positioning would seem to be the most obvious solution.
html,
body {
height: 100%;
position: relative;
}
.center {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #663399;
}
<div style="background-color:red; width:50%; height:50%; float:left"></div>
<div style="background-color:blue; width:50%; height:50%; float:right"></div>
<div style="background-color:green; width:50%; height:50%; float:left"></div>
<div style="background-color:orange; width:50%; height:50%; float:right">
<div class="center"></div>
</div>
I think that you should try absolute positioning. Here is another SO question where someone asked how to center a popup dialogue. Similar to what you are doing. How to design a CSS for a centered floating confirm dialog?
Look at the answers provided by Steve Robbins and Cristian Toma. Those I think might help you.