I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.
Related
Trying to center images in a div within a container div.
here is the html, images are contained within the container div
<div class="container">
<div class="col">
<img src="../Images/New folder (2)/Blue Tie.jpg" />
<p>Blue Tie</p>
</div>
<div class="col">
<img src="../Images/New folder (2)/Cardigan.jpg" />
<p>Cardigan</p>
</div>
</div>
here is the css
.container{
display:flex;
max-width: 350px;
text-align: center;
}
.col{
min-width: 100px;
margin-bottom: 30px;
padding:5px;
width:100%;
display:block;
}
.col img{
width:100%;
}
First of all the container should be set to 100% so it can get the whole width. Then you set the container's display to flex and you set the align items and justify content to center so every child is align to center.
Secondly you have to give a specific width to the children otherwise they will equally fill the width of the parent.
.container{
display:flex;
align-items: center;
justify-content: center;
background:lightgrey;
padding: 2rem 0;
}
.col{
max-width: 100px;
margin-bottom: 30px;
padding:5px;
width:100%;
display:block;
}
.col img{
width:100%;
}
<div class="container">
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Blue Tie</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
</div>
I have the following div arrangement, with the below css. Everywhere online seems to say you need margin:0 auto; for centering, but the text still goes to the top right,
Any help appreciated.
.menu_item {
margin: 0 auto;
}
<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
<div id='menu_but' style='width:36px;height:36px;'>
<div class='menu_line' />
<div class='menu_line' />
<div class='menu_line' />
</div>
<div id='menu'>
<div class='menu_item'>HOME</div>
<div class='menu_item'>ABOUT US</div>
<div class='menu_item'>CONTACT US</div>
<div class='menu_item'>PORTFOLIO</div>
</div>
</div>
First of all, <div> is not a self-closing tag so you have to write </div> instead of <div class='menu_line'/>
Then, you could simply do:
<style>
.menu_item{
display: inline-block;
}
#menu {
position: relative;
text-align: center;
}
</style>
<div id="menu">
<div class="menu_item">HOME</div>
<div class="menu_item">ABOUT US</div>
<div class="menu_item">CONTACT US</div>
<div class="menu_item">PORTFOLIO</div>
</div>
maybe use flexbox ?
.parent {
display:flex;
justify-content:center;
align-items:center;
}
All of the child elements will be centered
I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}
I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.
So I have html layout as this one:
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>
How to display it as:
<img src="image.jpg" /> <h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with floats however it displayed as:
<h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with positions (relative and absolute) and I got what I wanted, unfortunately it doesn't work very well in IE and if the short summary text is very short then image hides behind the other elements. I don't know image height (dynamic height), so height: xxx px; doesn't fit here.
Any help would be great.
EDIT:
I can't div wrap all (right side) elements in this case.
To get it done without adding additional divs to your code, add the below CSS
img{float:left}
div{display:table-row}
DEMO 2
Use position:absolute
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" width="40" />
<div class="summary">Short summary</div>
CSS
img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }
DEMO 3
<img src="image.jpg" class="left-image" />
<div class="right-col">
<h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
</div>
CSS
.left-image {
float: left;
}
.right-col {
margin-left: <width-of-image> px;
}
how about this: http://jsfiddle.net/xpq2m/
CSS
body {
padding-left: 100px;
}
img#s {
position: absolute;
top: 0;
left: 0;
}