I am trying to horizontally center an image that is contained within an anchor tag. I have tried setting it as a block and setting margins to auto with no luck. I have tried wrapping it in a div tag and doing the same, still, no luck. Even tried centering the img within the div within the div. I looked at other posts, and nothing seems to help. The image is still aligned to the left no matter what I do.
###HTML
<div id="slideWrapper">
<h1 id="slideHeading">This is a Header</h1>
<hr/>
<div class="centerMe">
<a href="javascript:slidelink()" class="slideA">
<img src="./images/Slides/cheeseBoards.jpg" name="slide" id="slideImg"/>
</a>
</div>
<hr/>
<div class="centerMe">
Check out our services and other great stuff.
</div>
</div>
###CSS
.centerMe {
margin-left: auto;
margin-right: auto;
border: 1px solid green;
text-align: center;
}
#slideWrapper {
border: 1px solid blue;
}
#slideImg {
display: block;
height:500px;
width:900px;
border:1px solid red;
margin-left: auto;
margin-right: auto;
}
I put borders around everything so that I could see where things were getting placed. It seems like the image isn't being contained within the div for some reason. This seems like it should be so simple. Any help would be greatly appreciated. Thanks.
Make sure there is no float:left inherited from parents. margin:0 auto; does not work when you have float:left; or position:absolute;
Related
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
I'm working on a photo gallery that is dynamically generated, photos will be different sizes, and each photo will have a DIV overlapping the image, on the same baseline as the image, that will contain "user menu" items related to that photo. (blue box below)
I'm having trouble getting the "user menu" div to position on top of the image. This div needs to be centered, and on the same baseline as the image, regardless of image size (not sure how to do this with absolute positioning)
I've seen suggestions to use CSS background-image, but I don't see that as a good option with dynamically generated content. I've seen a suggestion to position the image absolutely, and this does work except the parent DIV collapses and makes positioning other items on the page a nightmare. There are quite a few post that I've read through on stackoverflow, but I haven't found one that addresses or solves this particular issue.
This is an example of what I'm trying to accomplish. The blue boxes are the user menus, and should be centered on the baseline of the images.
I've tried 2 things, this doesn't seem to work with parent DIVs since the images are removed from flow and spacing gets screwed up as the parent DIVS collapse. http://jsfiddle.net/3d3m1x9k/
CSS
.box1{
position:relative;
display:inline-block;
background-color:orange;
border: 4px solid black;
}
.box2{
position:relative;
top:80px;
left:80px;
margin: 0 auto;
padding: 5px;
background-color: red;
border: 2px solid red;
}
HTML
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
<div class="box2">box</div>
</div>
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
<div class="box2">box</div>
</div>
This works better, but I can't get the box to center properly unless I use javascript to position the "user menu" DIV since the image widths are dynamic. (javascript isn't out of the question, just trying to first find a proper way using CSS)
https://jsfiddle.net/vv5rtkqz/
CSS
.box1{
position:relative;
display:inline-block;
background-color:orange;
border: 2px solid black;
}
.box2{
position:absolute;
bottom: 0px;
margin: 0 auto;
padding: 5px;
background-color: red;
border: 2px solid red;
}
HTML
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg"/>
<div class="box2">Center Me</div>
</div>
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg"/>
<div class="box2">Center Me</div>
</div>
You can get a simple start by using absolute positioning and a 2D transform.
.container {
position: relative;
display: inline-block;
}
.info {
background: black;
color: white;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
white-space: nowarp;
}
<div class="container">
<img src="http://shakacity.com/sites/default/files/dog_0.jpg" alt="" />
<div class="info">Contains the user controls</div>
</div>
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
I have a problem in floating a contenteditable div around a image. Here's my code:
HTML:
Section title
CSS:
.fl {
float: left;
}
.rgtDiv {
min-height: 300px;
border: solid 1px #ccc;
}
I want the rgtDiv to have left border at the right end of the image but right now it appears at the left end of the image.
When I click on the rgtDiv the cursor goes to the image and not inside the rgtDiv. How to make the cursor come inside the rgtDiv?
Also the border of the rgtDiv applies to the entire parent Div. How to make it to apply only for the rgtDiv.
Can anyone help resolving my problem?
Here's my jsfiddle link: http://jsfiddle.net/n8WJ2/
Thanks in advance!
yadav
try giving the rgtDiv a float: left; and a width ...
should work and don´t forget to clear your floats
You can add this:
.rgtDiv {
position: relative;
overflow:hidden;
min-height: 300px;
border: solid 1px #ccc;
}
Demo
It will resize depending of the width of the image.
Try this
HTML
<div>
<div class="section-title">Section title</div>
<div class="rgtDiv">
<img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300"/>
<div contenteditable="true" class="editableblock"></div>
</div>
CSS
.fl, .rgtDiv img {
float: left;
}
.rgtDiv {
border: solid 1px #ccc;
display:block;
}
.editableblock {
min-height: 300px;
}
If anyone still cares.
To workaround the issue with caret position, you can add zero-width space to the div in HTML:
<div contenteditable="true" class="rgtDiv"></div>
and restore it every time user clears it:
$('.rgtDiv').keyup(function(){
if($(this).text().length == 0){
$(this).text('\u200B');
}
});
Demo
overflow: hidden can be used for the contenteditable block :empty pseudo-class.
Please note that it has to be really empty: no spaces or tabs inside, just <div contenteditable="true"></div>
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)