This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 2 years ago.
I am wondering, is there a way you can make the span tag move into the center using css?
I need to ask this question because whenever I put text-align in the span, it doesn't work.
Html
<span>
This is span.
</span>`
Css
span {
text-align:center;
}
To just horizontal center the text inside an element, use text-align: center;. And for both on a text:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 months ago.
I have just started learning CSS, I ran into this problem. Please excuse me if its too silly to ask.
I want to center a DIV inside the body tag. I tired to use flexbox for this but somehow its coming in the center of the screen.
Here is the code.
<html lang="en">
<body>
<style type="text/css">
body
{
background: #6CB3A9;
display: flex;
justify-content: center;
align-items: center;
}
.main
{
width:300px;
height:300px;
background:white;
}
</style>
<div class="main">
<div class="white-bottom"></div>
<div class="red-top"></div>
<div class="yellow-center"></div>
</div>
</body>
</html>
No need for align-items: center; if you're using display: flex;:
Note: I set a height for the body to demonstrate that it sits horizontally in the center of the body tag.
<html lang="en">
<body>
<style type="text/css">
body
{
background: #6CB3A9;
display: flex;
justify-content: center;
// align-items: center;
height: 500px;
border: 1px solid grey
}
.main
{
width:300px;
height:300px;
background:white;
}
</style>
<div class="main">
<div class="white-bottom"></div>
<div class="red-top"></div>
<div class="yellow-center"></div>
</div>
</body>
</html>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 6 months ago.
This is my HTML Code in which I have one header and inside that, I have two divs, which I want to align one in the center and one in right
<Header class="header">
<h1>This is a heading</h1>
<div>this is my div</div>
</Header>
I Tried this solution
in css i'm trying to wrap the header in flex box so that both item can place side by side
using sass
.header {
display: flex;
justify-content: center;
div {
justify-self: right;
}
}
Example with SaSS converted to CSS
.header {
display: flex;
justify-content: center;
}
.header div {
justify-self: right;
}
div { border: 1px solid black; }
<Header class="header">
<h1>This is a heading</h1>
<div>this is my div</div>
</Header>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I am trying to put "per month" vertical-align to the price "$29" just like the picture.You can help me fix my code or give me a new way that is better for me.
This is what I want.
This is what I had
here is my HTML code.
<div class="deal">
<span class="price">$29</span>
<span class="period">per month</span>
</div>
and my css.
.price {
font-size: 50px;
}
.monthly {
color: #d0d3d4;
vertical-align: middle;
display: inline-block;
}
CSS
.deal{
display:flex;
align-items:center;
}
.period{
margin-left:0.5rem;
}
jsfiddle
.deal {
display: inline-flex;
align-items: center;
}
This question already has answers here:
prevent wrapping lines in flexbox child element
(1 answer)
Why is a flex item limited to parent size?
(1 answer)
Closed 2 years ago.
I have 2 divs, when i added long text on div b with width: auto that div cant change own width with own text! as you see the word Bar goes to new line!
here my code:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
div.b{
width: auto;
}
</style>
</head>
<body>
<div class="flex-container">
<div class='a'>Blocked Content Foo</div>
<div class='b'>Long Text Bar</div>
</div>
</body>
</html>
I want to change size of div b which contain Long Text Bar when i wrote a long text. thanks
This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 3 years ago.
Say I have the following code
p {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
<p>
Some text
<div>
</div>
</p>
What is created is this
Here the inline and inline-block elements are not vertically centered.
How would I make it look like this :
I have used flex css and also add one new div
I hope this will help you.
p {
display: inline;
margin: 0;
}
.inner-div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
.outer-div{
display: flex;
align-items: center;
display: -webkit-flex;
-webkit-align-items: center;
}
<div class="outer-div">
<p>Some text</p>
<div class="inner-div"></div>
</div>
just add float left to tag
p{
display: inline;
float:left;
}
This will align both element properly