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.
Related
When I have small image (eg. 100x100) and it's parent is bigger (eg. 200x200) then I want the image to be centered both vertically and horizontally in the parent.
But when image is wider (eg. 300x100) than the parent (200x200) I want it to be placed on the left side of the parent and have a horizontal scrollbar to scroll and see the whole image.
When image is higher (eg. 100x300) than the parent I want it to be placed at the top of the parent and have vertical scrollbar to be able to see the whole image.
I know how to do this in Javascript but I need a CSS solution.
You probably just want to always center the image and it will align how you would like on it's own.
.box {
width:300px;
height:300px;
border:1px red solid;
overflow:scroll;
display:flex;
justify-content:center;
align-items:center;
}
The most important part here is this:
display:flex;
justify-content:center;
align-items:center;
It's these three lines will make it so any thing inside the 'box' will be centered vertically and horizontally.
Then you can add overflow:scroll; to allow for the scrolling you want.
Working example:
.box {
width:300px;
height:300px;
border:1px red solid;
overflow:scroll;
display:flex;
justify-content:center;
align-items:center;
}
<div class="box">
<img src="https://unsplash.it/200/200" alt="">
</div>
<div class="box">
<img src="https://unsplash.it/200/500" alt="">
</div>
<div class="box">
<img src="https://unsplash.it/500/200" alt="">
</div>
At first, using Flexbox and its justify-content/align-items with center should do it, but it doesn't, as it will create an overflow at i.e. both top/bottom when the flex item is higher.
Src: https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-center
A better approach, that will work properly cross browsers, would be auto margins, and a wrapper around the img.
The reason for the wrapper is simply that there is an inconsistent behavior cross browsers when it comes to an img being a flex item.
Updated codepen
Stack snippet
.box {
width:300px;
height:300px;
border:1px red solid;
overflow: auto; /* changed so it only show scroll when needed */
display: flex;
align-items: flex-start; /* IE need this */
}
.box > div {
margin: auto;
}
.box > div > img {
display: block;
}
<div class="box">
<div>
<img src="https://unsplash.it/200/200" alt="">
</div>
</div>
<div class="box">
<div>
<img src="https://unsplash.it/200/800" alt="">
</div>
</div>
<div class="box">
<div>
<img src="https://unsplash.it/800/200" alt="">
</div>
</div>
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.
basically what i need is:
3 columns (for an example col-ms-4)
inside each of the columns i need a div
inside the div:
the top half of the div an responsive image and the bottom and
i cant manage to make the image half of the div and responsive
<div class="col-sm-4">
<div class="service-box">
<img class="service-box-img img-responsive" src="something">
<h2>Header</h2>
sdfsdfdfdsfsdfdsfdf
</div>
</div>
css:
.col-sm-4{
padding-left:100px;
padding-right:100px;
height:300px;
}
.service-box{
background-color:white;
padding:30px;
padding-left:100px;
}
.service-box-img{
height:150px;
}
Try adding a
.col-sm-4 img {
width: 100%
}
I have a markup that looks like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" />
<div class="YellowExclaimIcon iconsBlack"></div>
</div>
What I want to achieve is below:
Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.
Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.
The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.
I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.
if the image width & height are variable, you can only achieve this if you change the markup, something like this:
<style type="text/css">
div.container {
width:150px; height:250px; display:table-cell; vertical-align:middle;
text-align:center; background-color:#ededed}
div.image {
position:relative; display:inline-block; }
div.image img {
display:block; }
div.YellowExclaimIcon {
position:absolute; width:80px; height:80px; bottom:5px; right:5px;
background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>
<div class="container">
<div class="image">
<img src="Image.jpg" alt="" />
<div class="YellowExclaimIcon"></div>
</div>
</div>
The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.
Check a working sample: http://jsfiddle.net/Q9uhV/
Use position:relative to outer div and absolute to inner div
HTML
<div class="outer">
<div class="YellowExclaimIcon"></div>
</div>
CSS
.outer{
width: 150px; height: 250px;
border:solid red 1px;
position:relative;
vertical-align:middle;
background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{
position:absolute;
width:100%;
height:100%;
top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}
DEMO
You need to use z-index and some positioning like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" style="z-index:-1" />
<div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>
..for example, set your margins to what you need.
Make your warning image absolute so you can position it over the other image at a specified location.
HTML:
<div class="container">
<img src="penguin.png" />
<img class="warning" src="warning.png" />
</div>
CSS:
.warning {
position:absolute;
left:80px;
top:80px
}
See this jsFiddle for a demo.
I'm building a sort header for a table that's built entirely with divs (ie. no table tags). Inside the sort header, I have two divs, the sort title and the sort direction. I want to have the header horizontally centered. I have a jsfiddle that looks like this:
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;}
.HeaderTitle{float:left;}
.HeaderSort{float:left;}
What's the way to do this cleanly? I know I can specify the margin and width of each element to get the desired effect but when the value of these header will change then the alignment will not be centered. I know I can also do this with jQuery by looping over the header and calculating the width of headers and titles and programmatically setting the margins of each header. I'm looking to see if there's a more general CSS-based approach that will center both the HeaderTitle and the HeaderSort inside the SomeHeader classes.
Thanks for your suggestions.
http://jsfiddle.net/7R9WW/13/
Same markup, but display: inline-block on the inner divs and text-align: center on the field containers.
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;
text-align:center;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;
text-align:center;}
.HeaderTitle{display:inline-block;}
.HeaderSort{display:inline-block;}
The HeaderSort div seems unnecessary. Could it not look like this http://jsfiddle.net/7R9WW/7/
Updated answer: http://jsfiddle.net/7R9WW/14/
Use a wrapper!
<div class="wrap">
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
And the CSS:
.wrap {width: 220px; margin: auto;}
wrap these two header divs with another div and then giv that div a margin:0 auto.
<div class="SomeHeader">
<div id="wrapper">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
<div class="SomeOtherHeader">
<div id="wrapper">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
CSS:
#wrapper{
width: 100px;
margin: 0 auto;
overflow: hidden;
}
The width should be the sum of the width of the two contained divs , so you'll need to define a width to them.