This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've created a div in HTML:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 80px;
}
...
<div class="Div">
Just testing my Div.
</div>
...
Output:
I want the text to be in the middle of this rectangular, vertically and horizontally. How should I make it happen?
To be mentioned, I didn't use this div inside the main body, it's used inside another div; But in that i also have text-align: center;. I don't know if it's important; But i can provide more details about this code if needed.
P.S: I'm very new to css and html. Please accept my apologies if this code doesn't meet some standards.
There are several ways to do this. Since you, yourself tried to use vertical-align in the first place, so vertical-align will only work with display: table-cell;. In order to achieve it, you should set your div, display to table-cell and then you should also define a specific width for your div (I just went with 100vw to fill the available viewport).
So your final code should be something like this:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 20px;
height: 80px;
width: 100vw;
}
<div class="Div">
Just testing my Div.
</div>
But if you want some generic approach for this you should use flexbox instead. In order to use flexbox, you should define three specific properties to meet your requirement.
display: flex;. This will indicate your div as flex items and then their children should follow flex rules.
align-items: center;. This will indicate all of your items should align in the middle of your div horizontally.
justify-content: center;. This will indicate all of your items should align in the middle of your div vertically.
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
You may use display: flex;, justify-content: center; and align-items: center in your class Div
You may go http://howtocenterincss.com/, to auto-generate the code that centre text, image or div.
.Div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 1px;
/* text-align: center;
vertical-align: middle; */
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
Related
I have to align two contents in div as per below screenshot. I do not want to use flex as I am completely new to it. I have bootstrap3 library in my project
first content exactly at center
second content should be at extreme right. very minimum space at right corner will be ok.
I checked, float:right but it is not aligning second content at extreme right. how to fix?
Use display: flex and add invisible element. Then use justify-content: space-between; to align the items one on the left, one center and one on the right.
If you need vertical center use align-items: center;
Learn more on flex here. The bootstrap documentation does great job visualizing more configurations.
.parent {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid black;
width: 200px;
height: 40px;
}
.left-child {
visibility: hidden;
}
.center-child {
background: red;
width: 10px;
height: 20px;
}
.right-child {
background: red;
width: 10px;
height: 20px;
}
<div class="parent">
<div class="left-child"></div>
<div class="center-child"></div>
<div class="right-child"></div>
</div>
In my answer, you have to change the margin-top of the right content as the font-size or height of the center content
<style type="text/css">
.center{
text-align:center;
margin:auto;
display:block;
}
.right{
float:right;
margin-top:-18px;
}
</style>
<span class="center">Center</span>
<span class="right">Right</span>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 4 years ago.
When content in a box wraps, the width of that box extends to fill up all available space. Is there a way to have the width of the box be its "effective visible size"?
Here's code and a codepen to try:
div {
display: flex;
align-items: center;
justify-content: center;
width: 17rem;
}
span {
border-bottom: 1px solid #444;
text-align: center;
font-size:29px;
}
<div>
<span>
Helloworld this willwrap
</span>
</div>
https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0
I'd like to have the border-bottom be only as wide as the widest text line.
Using a <br> tag is not an option.
I could set width: min-content on the span, but that would make the text wrap more than necessary.
In your js fiddle just give you span a width inside of the div.
<div>
<div class="myClass">
<span>
Hello world this will wrap
</span>
<div>
</div>
and here is the css
body {
font-size: 3rem;
}
.myClass {
height: 16rem;
width: 30%;
background-color: #dedede;
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
}
.myClass span {
width: 50%;
border-bottom: 1px solid #444;
text-align: center;
}
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
Scenario :
I have a list of inline-block elements that I'm able to center.
But when the number of elements don't fit on a line, Todo : I would like
them to be justified to the left.
I've been messing with flex boxes
and other things, but I seem to only be able to do one at a time
(center the entire element or justify the elements left).
Anyone know
how to accomplish this?
Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.
What I have:
What I want:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Try to use flexbox:
https://jsfiddle.net/hapu8ny2/
html,
body {
min-height: 100%;
}
#items-box {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.item-box {
display: flex;
min-height: 100px;
min-width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Note: see i use min-height and min-width instead
I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this
#revealScoreMobile {
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
.stats {
text-align: center;
width: 100%;
background-color: red;
margin: 0 auto;
}
<div id="revealScoreMobile">
...
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have
text-align:center;
in there. What gives? What else do I need to do to center that DIV within its parent?
I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center
(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.
#revealScoreMobile {
padding: 10px;
text-align: center;
}
.stats {
display: inline-block;
text-align: center;
background-color: red;
}
<div id="revealScoreMobile">
<div> ... </div>
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.
Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.
Replace in your CSS:
.stats {
display: inline-block;
text-align: center;
background-color: red;
margin: 0 auto;
}
I'm new to css, so I not getting the way to make the text center of a container (div).
My HTML is
<div class="container">Some text goes over here.</div>
I tried with text-align: center, and vertical-align: middle, but no luck.
Is there any way we could make the text align in the center of the Div.
You can use the display: table-cell and the vertical-align: middle to set you text at the middle of the container.
.divClass {
width: 200px;
height: 200px;
border: 2px solid red;
text-align: center;
vertical-align: middle;
display: table-cell;
}
Check the working over here. http://jsfiddle.net/32rD7/
Use Text-Align:center;
<div class="container" style="Text-Align:center;">Some text goes over here.</div>
If you don't feel like applying various CSS hacks, you could take a look at the (experimental) flexbox layout.
div.container {
display: flex;
justify-content: center;
align-items: center;
}
Note that I omitted vendor prefixes.