HTML structure
<div id="header_div">
<a href="#">
<img width="250" height="75" src="./images/header_logo.png">
</a>
</div>
CSS:
:hover{
outline:1px dotted red;/*this line help us to actually see*/
}
#header_div{
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border:1px solid #477BA3;
border-bottom:0;
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
}
#header_div img{
border:0;
padding:5px 10px;
}
I used the Google Chrome element-inspector and noted that the height is 40px (of the <a>)
Live visual example here
Because <a> is an inline element. Try some CSS:
#header_div {
overflow: hidden;
}
#header_div a {
display: block;
float: left;
}
<a> is an inline element, therefore (with the exception of "with") it does not abide by structural properties such as "height". This is solved by display: block;.
Block element occupy as the entire width of their parent by default, but you wanted the <a> element to wrap tightly around your image. This is solved by float: left;.
Because the <a> element is the only object inside #header, #header collapses when <a> floats. This is solved by overflow: hidden;, which is a cheap "clearfix".
When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag.
Source: http://www.positioniseverything.net/easyclearing.html
Try adding display:block; to #header_div img. It worked for me.
Related
I have a problem were I've set an image inside a box but when I run the program i see that the box doesn't contain the image.
I've tried fixing it and realized that when i take out the align = "left" attribute the problem goes away.
I don't understand why this happens or how to avoid it if someone could explain it that would be great.
You can see the result here
div.body {
background-color: blue;
padding: 15px;
height: auto;
}
<div class="body">
<img id="full" src="../Photos/controler.png" alt="altvalue" hspace="15" usemap="imgmap" align="left" />
</div>
you need to set (max-)width:100% in img, and don't use html align nor hspace, they are deprecated.
When you use align=left(used in CSS nowadays as float:left) you are taking the element out of normal DOM flow, and placing on the left side of its container, with this content will wrap around the "floated" element
div.body {
background-color: blue;
padding: 15px;
height: auto;
}
#full {
width: 100% /* or max-width */
}
<div class="body">
<img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" />
</div>
Use overflow:hidden in your div:
div.body
{
background-color:blue;
padding:15px;
height:auto;
overflow:hidden;
}
<div class = "body">
<img id = "full" src = "../Photos/controler.png" alt = "altvalue" hspace = "15" usemap = "imgmap" align = "left"/>
</div>
Assuming that you need to have align="left" in there for whatever reason that may be, you can "clear" the parent container by adding width:100%; overflow:auto;
div.body {
background-color:blue;
padding:15px;
height:auto;
width:100%;
overflow:auto;
}
the float element always destroy its child element height. So the better solution use overflow:hidden or use clearfix hack see What is clearfix? and here
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
Here is an example:
p, span, div,img {
text-align: center;
}
<p>Para</p>
<span>Span</span>
<div>Div</div>
<img src="https://www.google.com/images/nav_logo195.png" />
<div><img src="https://www.google.com/images/nav_logo195.png" /></div>
I found apply text-align: center on img directly doesn't work.
Does this mean it has to be wrapped in an empty div when a centered image is needed?
Is there a better way to do this?
text-align aligns the text (and other inline) content inside the element to which it is applied.
There is no content inside an image.
You can either:
Make the image display as a block and then use auto margins
Put it inside any block element (it doesn't have to be a div, but that's usually the most sensible choice if you are just centring it) and set text-align on that container.
text-align: center centers horizontally inline content of the container it is applied to. So yes, to center image (inline layout) inside container (block layout), you should apply this css to container, not image.
If you want to center an img use:
img {
display: block;
margin 0 auto;
}
Instead of using the text-align on img tag, use it on div
p, span, div,img {
text-align: center;
}
#testimg {
width:100%;
position:absolute;
overflow:auto;
top:50px;
height: 100%;
}
<div id="testimg">
<img src="https://www.google.com/images/nav_logo195.png" />
</div>
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/