I need to center image inside my div but when i use some code it will change my other code and that is like magic circle.
My HTML http://textuploader.com/d40ta
My CSS http://textuploader.com/d40t5
Images are inline-block by default. That means you can center them inside a block-level parent by using text-align: center. <div> or <p> elements, to name a few, are block-level by default, but you can make almost any element block-level by applying display: block to that element.
If the image is display: block already, you can center it by applying margin: 0 auto where the auto is the functional value (the first value could be any unit, adding margin to the top and bottom of the image).
CSS3 Solution:
Simply modify the below CSS class.
.iui {
border: 2px solid black;
width: 200px;
height: 200px;
border-radius: 100px;
top: 20px;
display:flex;
justify-content:center;
align-items:center;
background-color: red;
margin-left: auto;
margin-right:auto;
}
JSFiddle Demo
CSS Solution:
In the below solution, we need to set the CSS property line-height the same as that of the element height for the class iui. Then we need to set the image inside the div with the CSS properties display:inline-block;vertical-align:middle, this will center the image.
.iui {
border: 2px solid black;
width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px;
text-align: center;
background-color: red;
margin-left: auto;
margin-right:auto;
}
.iui img{
vertical-align:middle;
display:inline-block;
}
JSFiddle Demo
Related
I have a general, possibly beginner question about HTML.
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
max-width: 200px;
border: 1px solid red;
}
#item2 {
height: 100px;
max-width: 200px;
border: 1px solid blue;
}
<div id="container">
<div id="item1"></div>
<div id="item2"></div>
</div>
My question is, why do #item1 and #item2 divs go underneath each other as opposed to next to each other? Isn't it true that they are no longer block-level elements because I have specified a set width for them? Why are they not lined up next to each other inside of #container? The #container has more than enough width to accommodate both items.
Note: This is strictly for learning/curiosity. I know that I can use margins and positioning to place them where I want to. However, I'm just curious as to why it behaves this way.
Thanks.
Div elements are block elements, unless you specify the display property to inline or inline-block it wont align to to the right like other inline elements do.
adding display : inline-block to the css of div's will give you what you want.
You have two ways to place you blocks horizontally: display property or float property.
It doesn't matter that you have set width to your elements. They are still block and displayed vertically.
To change this behaviour, use stylesheet (note that in both cases width, not max-width should be set):
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
display: inline-block;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
display: inline-block;
}
or this:
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
float: left;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
float: left;
}
<div> tag always start with new line if you are not using frameworks like bootstrap or other. If you want to see multiple items in single line then add css like display: inline-block
just add float:left; property in child divs or display:inline-block; https://jsfiddle.net/8tvn0kw6/5/
div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
Even if you specify width it wont allow other elements right next to it. This the property of block level element.
Use the css inline-block it will occupy the specified width or content width.
https://developer.mozilla.org/en-US/docs/CSS/display
The height of the container should be the sum of heights of the child divs and the heights of the borders of the children
ie., height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px
#container {
height: 204px;
}
The #container ie you div has a display property of block. This is a default property if you don't set it to anything else. In your case the div takes this default display property.
To view #item1 and #item2 side by side just use display: inline-block in your #container.
Please replace your class like below.
#item1{
height:100px;
max-width:200px;
border:1px solid red;
display:inline-block;
}
#item2{
height:100px;
max-width:200px;
border:1px solid blue;
display:inline-block;
}
This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
So I have been working on my first website, and I'm having lots of fun doing it.
However, I have found it very difficult to achieve centering a paragraph (spanning more than one line) vertically and horizontally inside of it's div container.
The div has a proportional width (96%), and it is not set by pixels. Also, the paragraph has a set amount of padding (ex: 20px top and bottom).
Is there a trick to center vertically and horizontally in this situation?
Thanks a bunch!
See this fiddle - http://jsfiddle.net/zv2Pu/1/
I have centered p both horizontally and vertically within the div container.
Hope this helps!
From you 2 examples:
a single container inside a sized box:
you can use a pseudo to vertical-align pseudo and inside boxe aside each others
DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
text-align:center;
}
.holder:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.holder p {
display:inline-block;
vertical-align:middle;
width: 70%;
margin: 20% auto;
text-align:left;
}
A single or several boxes inside a sized box:
you can use display:table-cell; DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
display:table-cell;/* it will expand if content grows oversized */
vertical-align:middle;
}
.holder p {
width: 70%;
margin: 10px auto;
}
.holder div {
width: 70%;
margin: 10px auto;
}
You could have simply used text-align: center; on your div.
I have a "container" div to which I gave margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
DEMO fiddle.
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
What 'auto' means:
Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).
Why 'display: inline-block' does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why 'display: block' centers:
When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
Solution for 'inline-block' elements:
Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).
For elements with property display: inline-block;
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]
margin-left:50%;
transform: translateX(-50%);
.container{
border:solid 1px red;
}
.container img{
display:inline-block;
margin-left:50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://placekitten.com/100/300" />
</div>
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}