I have div in HTML, there is i Picture and a piece of text. I have all this center through margin, but it is all in left. Why?
HTML:
<div class="slozka">
<img src="http://randompics.net/gmig6jx/" alt="složka"></br>
{{object}}
</div>
CSS:
.slozka
{
width:125px;
padding:0px
}
.slozka > img
{
width: 100px;
height: 100px;
margin: 0 auto;
padding:0px;
}
.slozka:hover
{
border-style: outset;
}
Auto margins centre block elements. That image is display: inline (the default).
Set .slizka { text-align: center; } instead (this centres inline content).
You just need to provide "text-align: center;" to ".slozka{...}" class
You may need to center .slozka also.
.slozka
{
width:125px;
padding:0px;
margin: 0 auto;
text-align: center;
}
Also if </br> is supposed to be a line break then it is in correct, you need <br />
use this
.slozka { text-align: center; }
Related
i have a problem in my css, i cant seem to center my image, unless i use padding, i tried using flexbox, wit justify-content, and align items, but it wont work, i don't know what to do, no matter what it wont center, unless i use padding. Can somebody help?
here is the code so far:
img {
padding: inherit;
margin:auto;
text-align:center;
}
here is the outcome of the webapage
Try This:
img {
padding: inherit;
margin:auto;
width: 200px;
display: block;
}
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
Option 1:
Setting a width so you can sets the margin to 0 auto
img { width:<image_size> margin: 0 auto }
Option 2:
Use block display and set the margin to auto
img { display: block; margin:auto; }
Use
img {
display: block;
margin:0 auto;
text-align:center;
}
Resuming all the answers:
If your image have the property display block, to center your image you will need to do the following:
img {
display:block;
width: 200px; // You need to add a fixed width
height:auto // Optional but i recommend, in case of you need a proportional redimensioning
margin:0 auto;
}
If your image "lives" free inside of your content, without display property, then you just need to center with the property text-align:center.
Example:
.center{
text-align: center;
}
<p class="center">
<img src="path/to/your/image.jpg" alt="Image Alt">
</p>
I hope it helps you.
please try to set the margin-right and marign-left to null.
img {
padding: inherit;
margin-left: 0;
margin-right: 0;
text-align: center;
}
I have a simple gallery of square thumbnails, all of them have the same dimensions. Every thumbnail is also a link. I want this entire gallery to be horizontally aligned, but "margin: 0 auto;" doesn't work. Thanks for any help!
http://jsfiddle.net/ds2uockq/
HTML:
<div id="gallery">
<img src="http://placekitten.com/g/150/150" />
...
<div>
CSS:
#gallery {
margin: 0 auto;
}
Use text-align: center;
#gallery {
margin: 0 auto;
text-align: center;
}
working demo
Why did I use text-align?
Because #gallery contains inline element i.e. <a>. And to center an inline-element we use text-align.
Just give the width to the body and container.
CSS:
body{
width:100%;
}
gallery{
width:70%;
margin:0 auto;
}
Here's a simple method
#gallery {
display: block;
width: 100%;
text-align: center;
}
Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
+47 930 98 907
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}
In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}
if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
I'd like to ask this question again as its previous incarnation was half a decade ago. We need not consider anything pre-IE9 for the purposes of this discussion:
I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:left;">SMALL</div>
</div>
I am struggling with this currently and the best solution I've found is magic offsets from inspection, and that's hardly robust. Inline-block has its own issues I'd prefer to avoid.
Edit:
http://jsfiddle.net/crw4r/10/
As you can see, floats align at the top, not at the baseline.
You could use display: table-cell instead of floats?
#header {
display: table;
width: 100%;
}
#header div {
display: table-cell;
}
#left {
font-size: 40px;
}
#right {
text-align: right;
}
Demo
Set the line-height to be the same on both.
http://jsfiddle.net/crw4r/6/
eg.
line-height: 42px;
or if this is not what you want...
you could use absolute positioning.
http://jsfiddle.net/crw4r/7/
or, you could set the line height on both and add margin to the top of the smaller one, so the sum of the line-height and top margin are the same on both text.
http://jsfiddle.net/crw4r/13/
With display: inline-block, the divs are automatically aligned on the baseline. To compensate for the float, you can use text-align
#left {
display: inline-block;
width: 50%;
font-size: 40px;
text-align: left;
}
#right {
display: inline-block;
width: 50%;
text-align: right;
}
See JSFiddle
If you need to account for white space, use width: 49% for one of the divs
JSFiddle
<div id="container">
<div class="left"><span>Big</span></div>
<div class="right"><span>Small</span></div>
</div>
#container{
width:100%;
margin:0px auto;
}
#container div{
position:relative;
height: 42px;
width: 100px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}
.left{
float:left !important; font-size:40px;
}
.right{
float:right !important;
}
Try below css and html
CSS
.header {
overflow: hidden;
width: 200px;
display:table;
}
.header > div{
display:table-row;
}
.header > div > div{
display:table-cell;
vertical-align:baseline;
width:50%;
}
.big {
text-decoration: underline;
font-size: 40px;
}
.small {
text-decoration: underline;
font-size: 12px;
}
HTML
<div class="header">
<div>
<div class="big">BIG</div>
<div class="small">SMALL</div>
</div>
</div>
Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.
You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/
I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/
Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}