I know I'm missing something obvious here... the DIV has a fixed width, the image has a fixed width, this should be a snap...
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
You can play with it here: http://jsfiddle.net/AHjAk/
You'll also need to add display: block; to the image if you plan on centering it using auto for its left/right margins
http://jsfiddle.net/AHjAk/1/
or try this simple text-align:center; the container
http://jsfiddle.net/AHjAk/2/
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg' class='featured'>
</div>
Try adding text-align:center to the parent gif that should center the image.
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
And if you want to center that parent div itself, your body needs a text-align:center.
Related
I am attempting to center align an image carousel in a wordpress webpage. I tried this line of code in Custom CSS from the panel menu and it did not work for me:
.cleaning_carousel {width: 50% !important; margin: 0px auto !important;}
To see the site in question, visit https://livingwatersict.com/ponds/
Can someone point out the mistakes that I am making?
you can try something like this make an outer div and use css text-align:center
.outer
{
text-align:center;
}
.inner
{
width:300px;
height:auto;
}
<div class="outer">
<img src="http://www.team-bhp.com/forum/attachments/travelogues/412228d1282577980-taj-mahal-full-moon-fatehpur-sikri-mathura-bharatpur-keoladeo-national-park-img_9119_20_21_tonemappedb.jpg" class="inner">
</div>
how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
If I am having two divs in a parent div and and all three divs have float left. What I have to do is to align center the two child divs without removing float left.
Use display: inline-block instead of float: left on child divs and you can give text-align: center to the parent div.
Let me see if i have understood,so you have something like this:
<div id="parent" style="float:left;">
<div id="child1" style="float:left;"></div>
<div id="child2" style="float:left;"></div>
</div>
And if im right you want the two div childs to be aligned in the center of the parent div but without removing the left float of none of them.Then i think this might work:
<div id="parent" style="float:left;position:absolute;">
<div id="child1" style="float:left; position:relative; left: 100px"></div>
<div id="child2" style="float:left; position:relative; left: 100px"></div>
</div>
So in the div style,try to center it by assigning a value in percentage or pixels to left:
It should work.I also advice you to use percentage,but first use pixels to understand how it works.And another advice is to not use css in html tags,i just showed you what to do,but it's recommended to have another file (style.css) to include in your html file.
This layout may help you:
HTML
<div class="div-p">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;float:left;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
If you want to center the parent div then use margin:0 auto; and remove the float:left;
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;margin:0 auto;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
#parent{width:100%;}
#child1,#child2{width:90%;margin:0px 5%;}
set your child width in percentage with margin.
it will align both child div in center
you need set these styles for 2 child divs :
{ width:50%; text-align:center; float:left; height:50px;}
and the parent div :
{ width:100%; margin: 0 auto; float:left; height:50px;}
Note: height style is optional.
Here is My Demo http://jsfiddle.net/9D4L4/2/
I am using canvas element for the Image.
The DIV which contain canvas Element not taking the Line-height.
I want to make the canvas element verticaly center to the div. Please Help me
HTML
<h1>Normal Image </h1>
<div>
<img src="http://jeevanmukti.info/images/key.gif" />
</div>
<br><br><br>
<h1>When i use canvas </h1>
<div>
<canvas >1111</canvas>
</div>
CSS
div{background:grey; width:100px; height:100px; text-align:center; line-height:100px; }
img{max-width:100%; max-height:100%}
canvas{background:url('http://jeevanmukti.info/images/key.gif') no-repeat center center; padding:0; margin:0; max-width:100%; max-height:100%}
I want the Whole Canvas(in red color) to be the vertically center of that DIV
add
canvas{vertical-align: middle;}
Update below css attribute in your code :
div{margin:0 auto;}
Giving the canvas a height of 100px will do it, so the canvas will fill the height of the parent DIV
<div id="post">
<img src="image.png"/>
<div class="postbox">
some content here
</div>
</div>
How do i make `.postbox' expand it's width to the max possible with with respect to the width of the image or without the image?
#post{
width:569px;
overflow:hidden
}
#post img, #post .postbox{
float:left
}
I tried width:100% to .postbox but it's taking up the whole width.
http://jsfiddle.net/FTY4k/
.postbox { width:100% }
This will make the div the same width as the container
If it doesn't mess up your layout, you could float the image, but not the div.
#post{
width:569px;
overflow:hidden;
}
#post img{
float:left;
}
Using CSS float pulls the element out of the flow. In a sense, your img and div class="postbox" a no longer contained in the div id="post" even though it is still their parent in the DOM tree.
You can try setting those to inline-block instead of using float, or float them together withing an inner div and have a clear, all contained within id="post"
More details depends somewhat on your bigger picture of what you're trying to do in the layout.
For cases like these I like to use Nicole Sullivan's media object abstraction. Here's a fiddle (for reference).
HTML:
<div class="media">
<img src="http://placehold.it/100" alt="" />
<div class="bd">lorem dolor...</div>
</div>
CSS:
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}