I've seen this asked many times, none of the solutions are working for me. As you can see in the Fiddle this is working exactly how I want it to in Chrome, but in IE the text is stuck at the top of the box, instead of in the middle. If you run it in IE browser and Chrome side by side you'll see what I mean. I want it in the middle exactly, using margin:auto; works perfectly in chrome, but in IE it doesn't. I'm not sure of a fix that will move the paragraph down so it is aligned in the middle both vertically and horizontally.
<section class="info">
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
</section>
CSS:
.info{
display:flex;
width:325px;
margin:auto;
}
.infofont{
font-weight:bold;
text-align:center;
margin:auto;
}
https://jsfiddle.net/fmu8g38h/
try this instead:
.info{
display:flex;
top:50%;
left:50%;
transform: translate(-50%, -50%);
position:absolute;
}
https://jsfiddle.net/k1cbjvj7/1/
margin:auto is used to align the texts horizontally.
to align in center the top portion must be aligned seperately
You forgot to write flex-direction: row / column; align-items: center; justify-content: center; for when display is flex and inside content will be vertically and horizontally center and you should remove margin: auto; from .infofont class.
Below is update your CSS code.
.info{
border: 1px solid black;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
width: 325px;
margin:auto auto;
height: 500px;
}
.infofont{
font-weight:bold;
text-align:center;
}
Check the snipped
.info{
border: 1px solid black;
align-items: center;
display:flex;
flex-direction: row;
justify-content: center;
width:325px;
margin:auto auto;
height:500px;
}
.infofont{
color: green;
font-size: 16px;
font-weight:bold;
line-height: 1.2;
margin: 0;
text-align:center;
}
*,
*:after,
*:before{
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
<section class="info">
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
</section>
Note: I test this code only IE11, Chrome and Safari.
Related
How to center text with the image having border-radius of 50%, horizontally.
Below is the code:
<div>
<img src="images/kristen.png" alt="" class="box">
<span>Kristen Wu</span>
.box{
border-radius: 50%;
display: flex;
height: 40px;
align-items: center;
text-align: center;
margin-top: 20px;
}
I'm sorry if my answer is not right, because i catch your mean is to make align center. Maybe it can help
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
background-color:yellow;
}
.box{
border-radius: 50%;
display: flex;
height: 40px;
align-items: center;
text-align: center;
margin-top: 20px;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class = "wrapper">
<img src="images/kristen.png" alt="" class="box">
<span>Kristen Wu</span> </div>
</body>
</html>
Can you upload an image of what the expected outcome should look like?
To center the image within your div tag, you can achieve this by applying:margin: 0 auto; in your .box class.
This is equivalent to the following:
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
Basically centering your image horizontally.
The easiest way to align something to centre in HTML is the center tag.
You can use that to centre anything. And the code you wrote for border radius is also correct.
PS. center is the right spelling for the code. IF you write centre, it wont work
Is it possible to align my text to the vertical middle. I've used valign, text-align and padding but will doesn't work. Also, I don't want any image to align with text.
Solution needs to be HTML only.
body {
background-color: #6B6B6B;
margin: 50px;
<div style="background:#2f2f2f;height:42px;width:250px;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>
Just add to the div.
display: flex;
align-items: center;
body {
background-color: #6B6B6B;
margin: 50px;
<div style="background:#2f2f2f;height:42px;width:250px;display: flex;
align-items: center;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>
Also, the html format is not valid, a better code would be something like this:
body {
background-color: #6B6B6B;
margin: 50px;
}
.container {
background: #2f2f2f;
height: 42px;
width: 250px;
display: flex;
align-items: center;
}
<div class="container">
<span>Text</span>
</div>
Your HTML has some syntax errors, and you need to use negative margins in this case to align to the bottom center.
body {
background-color: #6B6B6B;
}
.bottomcenter {
position:absolute;
width:300px;
height:300px;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
color:white;
}
<div style="background:#2f2f2f;height:42px; text-align:center;" class="bottomcenter"><i><a style="padding-top:10px;">Text</a></i></div>
I think it's this one. If you want to make the text go to the center you just write this code:
text-align: center;
I have a span which has to aligned bottom and left-most to the content of it's container. Span text-node and container text-node font-size may differ.
Whatever it's span should always align to its container text-node bottom and to left-most. I tried using float left to the span node. It aligns to the left most but not to it's bottom. Removing float to the span, Aligns bottom but not left most. Sorry if I have not explained you better.
Refer the image attached for more clarification
Also here is the code which I tried:
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
P.S I don't want any modification to the DOM. I have specific reason for this DOM structure which is going ti be vague if i'm going to explain you guys. Also don't want absolute position to be applied for the span. Thanks in advance
You have a flexbox container - so why not make w100 also a flexbox and align vertically using align-items: center - see demo below:
.flexCtn {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
width: 300px;
border: 1px solid #dfdfdf;
background: #fff;
}
.w100 {
font-size: 30px;
width: 100%;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
}
span {
font-size: 14px;
float: left;
display: inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
padding : 16px 0 0 0; /* specify top position */
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
I have used flex property
https://plnkr.co/edit/flxsEcpSBe8sr2w3wPFc?p=preview
div{
font-size:14px;
display:flex;
align-items:flex-end;
flex:1;
}
I have the following problem. I have a container which is responsive so it will be the width of the browser. Or when the browser is large enough there will be a sidebar displayed next to it.
Inside this div I have about 10 items with the following css:
display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;
So they form a grid.
At this point what happens is that when the container div is 440px width for example. They will diplay nicely 2 on each row. But when the width of the container is 600 for example. still 2 are diplayed with a large white area on the left.
Now I want to center them. So the 2 should be centered in the container. I tought I would do this by adding another container warpping the elements and giving it a margin:auto; But that doesnt work:
Fiddle: http://jsfiddle.net/kqvcnugs/
So how do I make sure the items are always in the middle?
Thank in advance!
Do you mean this?
http://jsfiddle.net/kqvcnugs/7/
In your case, just set to a display: inline-block; and parent div text-align: center;
But short description is:
.parent { text-align: center; }
.children { display: inline-block; }
Good luck!! :)
Like this: stackoverflow post
You can make use of CSS3 flexible box layout.
justify-content: center on the parent container will align it to
the center horizontally.
flex-wrap: wrap will make sure the
blocks wrap to next line instead of resizing.
body {
width: 100%;
background: blue;
}
div {
background: red;
overflow: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: block;
width: 200px;
height: 200px;
background: tomato;
margin: 10px;
float: left;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Instead of using float, you can use display:inline-block; and then give text-align:center; to the parent element.
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
/* Add text-align:center; */
text-align: center;
}
a{
/* Change to display:inline-block; remove float */
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Jsfiddle
you can try this one:
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
text-align: center;
}
a{
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
DEMO HERE
I am trying to make a footer for my website.
I want 2 divs and one list to be inline in this footer. But that is not happening. I used the css the CSS Property display:inline-block. What happens is that the divs get aligned but the list element just shifts a bit down.
Here is the jsFiddle Link: http://jsfiddle.net/tw2Wp/2/.
If you see the JSfiddle, you will that the three divs with class footerContents are not aligned in-line.
Could someone please explain me why this is happening? Is it right thing to use inline-block for this thing or is there some better way(I'm sure that there is)?
Please add vertical-align to .footerContents:
.footerContents {
display: inline-block;
width: 200px;
height: 200px;
padding: 5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
vertical-align: top; /* <<< */
}
Demo
Would you use the css3 flexbox module, like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#footer {
height:auto;
width:100%;
background-color:#666;
background-image:url(footer_shade.png);
background-repeat:no-repeat;
background-position:50% 0;
border-top:1px solid #FFF;
color:#fff;
font-family:'Bree Serif',serif;
font-size:16px;
line-height:20px;
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.footerContents {
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin: 20px;
margin-bottom: 5px;
background-color: red;
-moz-flex-box:1;
-webkit-flex-box:1;
-ms-flex:1 1 200px;
-webkit-flex: 1 1 200px;
flex:1 1 200px;
}
Please view the demo. and some about the flexbox, if you want to know,please will click here and here.
A solution would be to float the elements rather than using inline-block, see working example here: http://jsfiddle.net/tw2Wp/2/
Note that I also added an extra div with the class clear which will clear the floats. By doing this your background will appear again. Because of the floated elements the parent div doesn't have a clue how large it should be (so it's height 0).
.clear{
clear:both;
}
You can do like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#footer {
height:auto;
width:100%;
background-color:#666;
background-image:url(footer_shade.png);
background-repeat:no-repeat;
background-position:50% 0;
border-top:1px solid #FFF;
color:#fff;
font-family:'Bree Serif',serif;
font-size:16px;
line-height:20px;
**white-space: nowrap;**
}
.footerContents {
display:inline-block;
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
**vertical-align: top;
white-space: normal;**
}
please view the new demo.