I have an image that is 500px wide. It is inside of a div. The width of the div is 250px. How can I align the image centered inside of the div? Should I use top or left or should I have negative margins?
I would use negative margins: #myDiv img { margin: 0 -125px; }. This only works if you know the width of both the DIV and the IMG though.
Can you change (or at least add) something in the html around the image? This is kind of an old trick, and is a little awkward in that it requires you to add an extra <div> around the image, but it works quite nicely if you're ok with that (Note, added some borders to make the effect easily visible while testing):
<div style="width:250px; border: solid 2px red;">
<!-- Place the following div at 50%: -->
<div style="width: 500px; margin-left:50%; border: solid 2px blue;">
<!-- ...then move the image back by half of it's own width: -->
<img style="width:500px; margin-left:-250px; border: solid 3px green;" />
</div>
</div>
Demo
Hey now used to display table-cell properties as like this
<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>
Css
.parent{
border:solid 1px red;
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
}
.parent img{
vertical-align:top;
}
Demo
try this one (not sure about ie-6 but work fine in ie-7 and plus)
<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>
<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>
if is it possible to use that image as background you can try this one
.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
The strange thing is, I didn't change anything but when I refreshed the page the element was shifted over to the left.
my code is:
<section class='gallery-set'>
<div>
<img class='tilesetsmall' src ='images/sample.jpg'>
</div>
</section>
and my css for the gallery-set class is simply:
.gallery-set {
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:inline-block;
}
I honestly have no clue why it is shifted to the left despite me setting the margin to auto, especially since this has worked before.
Some ways:
Put a div and use text-align
CSS:
.align {text-align: center;}
.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:inline-block;
}
HTML:
<div class="align"><section class='gallery-set'><div>
<img class='tilesetsmall' src ='images/sample.jpg'></div></section></div>
Use margin: auto and display: block
CSS:
.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:block;
}
HTML:
<section class='gallery-set'><div>
<img class='tilesetsmall' src ='images/sample.jpg'></div></section>
Remove the display:inline-block; and it will work. Here's a fiddle.
You may have meant to use display:block instead, which would make sense. Using inline-block doesn't make sense if you want to center the <section>. See this page for a good demonstration of how the various display values work.
I want to place a div over an image. As of now I think I want it towards the top left of the image. This needs to be compatible with views on different screen sizes so I don't think an absolute positioned div will work... How can I do this? Please help.
You can put the image as a background of a div and insert another div in the first one.
Something like this:
<div style="background: url('myimg.png'); width: '100px'; height: '100px' float: left;">
<div style="float: left;">TEST</div>
</div>
Test will appear on the top left side of the image.
A <div> already starts at the top left of its parent element. Since it's a block level element you will have to specify a width or else it will take up all the available space.
Working example: http://jsfiddle.net/pd39B/
<div></div>
<img src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
div {
height: 50px;
width: 50px;
background-color: blue;
}
this is a bit trickier ...
Placing a div over an iframe/video...
(just replace the iframe w/ your image) ....
trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr {position:absolute; top:7px; left:7px; width:90%; height:90%; background-color: #a3E1a6; opacity:0.5; }
</style>
<div id="Cntr0" class="Container" style="width:220px; height:140px;">
<iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
<div id="div0" class="Lyr" ></div>
</div>
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 have a problem with CSS and HTML I cannot understand why this is happening
HTML:
<body>
<div id="header">
<div id="header_conteiner">
<div id="logo_container">
<img src="images/logo.png" />
</div>
<input type="text" id="txtSearch" class="text_input" />
</div>
</div>
</body>
CSS:
body{
background:#787777;
font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
font-size:0.81em;
margin: 0px;
padding: 0px;
}
#header{
height:100px;
background:#000000;
width:100%;
margin:0px;
border:0px solid #6F3;
}
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
}
#logo_container{
padding-top:3px;
width:237px;
height:100px;
border:1px solid #03F;
}
#txtSearch{
width:220px;
height:20px; float:right;
}
Here is result:
as you see in image input text is out of header_conteiner can anyone advice me something?
Move the input before the logo container.
Add this to #header_conteiner:
float: left;
clear: both;
So result is this:
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
float: left;
clear: both;
}
logo_container is a div, a block element. Meaning it takes up the horizontal space in its container; the next HTML element will be forced below it. As logo_container is set to 100px, the same as header_conteiner, there is no vertical space left for your input box. It is forced below logo_container.
To fix the problem, you could make logo_container an inline element and float it left. Inline elements can sit next to each other, whilst block-line elements need their own horizontal space.
CSS display property: http://www.w3schools.com/cssref/pr_class_display.asp
it looks like logo_container has a padding on top of 3px