So I have a div inside a div. The content in the child div needs to be text-aligned left and the child div itself needs to be centered within the parent div. My problem is, I can't get the child div to only be the width of its content so I can center it. It keeps stretching the length of the parent div. I've tried display:inline-block, inline, table. nothing is working. How do I get the child div to be centered within the parent, but have the child div content be aligned to the left?
Here is my code.
HTML:
<div class="gallery">
<div class="sub_gallery">
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
...
</div>
</div>
The CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
display:inline-block;
}
.image {
display:inline-block;
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
EDIT:
Here is a simple diagram of what I want it to look like:
Diagram
This answer makes things quite different but try it. I am quite sure this will help because it centers the images perfectly on the page.
HTML:
<body>
<div class="gallery">
<div class="sub_gallery">
<center>
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
...
</center>
</div>
</div>
</body>
CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
width:100%;
}
.image {
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
I hope this was helpful.
Related
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I'm building responsive website and have a problem with aligning div.button to align with bottom side of the image.
Here is the code: http://jsfiddle.net/E22nq/
I would like to have div.button aligned with image, and dynamically hide text in div#text so that the width of the div.content is dependent on image (image height depends on the width of the browser).
HTML:
<div class="content">
<div id="left">
<img src="" />
</div>
<div id="right">
<div id="text">...</div>
<div class="button">BUTTON</div>
</div>
</div>
CSS:
.content {
width: 100%;
}
#left {
width:50%;
float:left;
}
#right {
width:50%;
float:left;
}
img {
width:100%;
}
try using
#right {
width:50%;
float:left;
clear:left;
}
I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?
(I want #two to align itself to the middle position of #one.)
Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/
HTML :
<div id="one">
</div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
CSS :
#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }
I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...
Anyone? This is probably some simple positioning error that I can't figure out.
EDIT : I was looking around, and I saw this demo by Nivo Slider -- http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with a 960px width?
You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle
#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }
New markup.
<div id="wrapper">
<div id="one"></div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
</div>
Without the wrapper two would just be aligned to the center of your window (or a parent with a width).
You center a dynamic div by cimply giving it a display: table value
DEMO http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/
#two {
text-align:center;
display: table;
margin: 0 auto;
}
I have an overflow-x:scroll and overflow-y:hidden. I have images, but when I'm trying to make it only scroll horizontally, it doesn't work? When I highlight the images and drag the highlight downwards, its scrolls down vertically.
#contents
{
margin:0 auto;
text-align:center;
width:1200px;
clear:both;
}
#image_contents
{
float:left;
height: 208px;
overflow-x:scroll;
overflow-y:hidden;
margin:0 auto;
}
.images
{
float:left;
margin:2px;
background:#000;
overflow:hidden;
position:relative;
display:inline-block;
}
<div id="contents">
<div id="image_contents">
<div class="images">
<img src="1.jpg"/>
</div>
<div class="images">
<img src="2.jpg"/>
</div>
<div class="images">
<img src="3.jpg"/>
</div>
<!-- and so forth !->
</div>
</div>
The best way to do this, to my knowledge, would be to create another div inside the image_contents div. Then give this div the width of all the images (with JavaScript if necessary).
Another solution would be to use display:table-cell on the images inside another div with display:table-row.
Or (dare I say it) use a table.