It should work for html email, so I can't use align-items and justify-content
I want to let elements center on the same line, align left and right.
I have try to set display: inline-block; to let them in the same line, but text-align: start and text-align: end is not working.
<div style="width: 100%; height: 65%; background-color: pink">
<div style="display: inline-block; text-align: start">
<p>Left and Center</p>
</div>
<div style="display: inline-block; text-align: end">
<p>Right and</p>
</div>
<div style="display: inline-block; text-align: end">
<p>Center</p>
</div>
</div>
Use Display: table and Display: table-cell and add Vertical-align: middle.
[![enter image description here][1]][1]
Try with the below code:
<div style="width: 100%; height: 200px; background-color: pink; display: table; table-layout: fixed;">
<div style="display: table-cell; text-align: start; vertical-align: middle;">
<p>Left and Center</p>
</div>
<div style="display: table-cell; text-align: end; vertical-align: middle;">
<p>Right and</p>
</div>
<div style="display: table-cell; text-align: end; vertical-align: middle;">
<p>Center</p>
</div>
</div>
[1]: https://i.stack.imgur.com/EOEI9.png
Related
Why is there a line break between the middle and last floated h1 tags?
.div {
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
}
<div class="div" style="height: 200px; width: 55%">
<div>
<h1 style="display: inline-block; float: left;">1</h1>
<h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
<h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
</div>
</div>
<div class="div" style="height: 200px; width: 30%">
<p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
<p>dsfdsfdsfsfds</p>
</div>
There are two main issues with your code:
1- You need to add "box-sizing: border-box" to the CSS for the .div class. Without this, by default, your browser adds the width of the border to the width of your divs, so they are slightly more than the percentages you are telling them to be. Border-box makes the browser include the border in the width you set.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
2- You can't have any white space between your divs, or that tiny space will push your third div into the next line. I eliminated the spaces between the close of one and the start of another . You can choose flex or grid display if you don't want to have to do this.
.div {
box-sizing: border-box;
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
}
<div class="div" style="height: 200px; width: 55%">
<div>
<h1 style="display: inline-block; float: left;">1</h1>
<h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
<h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
</div>
</div><div class="div" style="height: 200px; width: 30%">
<p>dsfdsfdsfsfds</p>
</div><div class="div" style="height: 200px; width: 15%">
<p>dsfdsfdsfsfds</p>
</div>
My goal was to have 5 divs nested within a parent div.
Each div equally wide, and side-by-side.
This is my HTML:
<div style="margin-left: auto; margin-right: auto; width: 80%;">
<div style="display: table-row;">
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
</div>
</div>
The side-by-side feature is working, but not the widths. It's all just squeezed to the left. Any ideas why?
The problem is that you are using a table-row without it being inside a table.
<div style="margin-left: auto; margin-right: auto; width: 80%;display:table">
<div style="display: table-row;background-color:green;">
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
</div>
</div>
This can be achieved very beautifully using flex-boxes.
<div style="margin-left: auto; margin-right: auto; width: 80%; display: flex">
<div style="flex: 1; text-align: center;">Left</div>
<div style="flex: 1; text-align: center;">Left</div>
<div style="flex: 1; text-align: center;">Left</div>
<div style="flex: 1; text-align: center;">Left</div>
<div style="flex: 1; text-align: center;">Left</div>
</div>
Try changing
<div style="display: table-row;">
to
<div style="display: table; width:100%;">
To achieve this you need to set display: table; to the outer div:
<div style="margin-left: auto; margin-right: auto; width: 80%;display:table">
<div style="display: table-row;">
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
<div style="display: table-cell; text-align: center; width: 20%;">Left</div>
</div>
</div>
Use display: flex and widen all elements to a 100%.
.wrapper {
display: flex;
}
.wrapper > div {
width: 100%;
}
<div class="wrapper">
<div>Left</div>
<div>Left</div>
<div>Left</div>
<div>Left</div>
<div>Left</div>
</div>
I'm following this SO Answer to vertically align a div's contents that has float: left styling:
.main {
height: 85px;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
But, it doesn't vertically align as per the height of the wrapper div main. What is wrong in the code?
If you add
display: flex;
align-items: center;
to .main class, it should work.
.main {
height: 85px;
background-color: #f00;
/*position: absolute;*/
/*top: 2rem;*/
display: flex;
align-items: center;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
In the linked question, you can see that the line box aligns itself, but not exactly with the main - try setting a height for the main and you'll see.
You've height set for the main here and that makes all the difference. For this you can use a psuedo element to center:
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
See demo below:
.main {
height: 85px;
border: 1px solid;
}
.child_1,
.child_2 {
float: left;
}
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
I am trying to align the text inside a div in center of the page and also text start from left side. But getting a problem as role1, role2 text is showing in center of Role(r) text i want that all the text should right aligned but in center of the page.
.home-role-access-text {
text-align: center;
height: 20px;
width: 250px;
position: absolute;
top: 60%;
left: 50%;
margin-left: -125px;
font-size: 20px;
color: #026890;
}
<div class="home-role-access-text" data-ng-show="alarmsCounter <= 0">
<div>
<div data-ng-hide="assignedRoles.length<=0">
<div style="padding-bottom: 10px;"><b>Role(r)</div>
<div style="font-size:11px;font-weight: 100;display: inline-block; text-align: left" data-ng-repeat="role in assignedRoles">Role1 </div>
<div style="font-size:11px;font-weight: 100;display: inline-block; text-align: left" data-ng-repeat="role in assignedRoles">Role3 </div>
</div>
</div>
</div>
Change display in the child divs of <div class="roles"> to block instead of inline-block.
I have included a jsfiddle as well. I had to change the CSS for .home-role-access-textto get all text to start on the left and stay within it's container. I suggest using display: flex because it's better at centering a block of content. https://jsfiddle.net/Luxz8eff/
.home-role-access-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 20px;
color: #026890;
}
<div class="home-role-access-text" data-ng-show="alarmsCounter <= 0">
<div>
<div data-ng-hide="assignedRoles.length<=0">
<div style="padding-bottom: 10px;"><b>Role(r)</b></div>
<div style="font-size:11px;font-weight: 100;display: block; text-align: left" data-ng-repeat="role in assignedRoles">Role1 </div>
<div style="font-size:11px;font-weight: 100;display: block; text-align: left" data-ng-repeat="role in assignedRoles">Role3 </div>
</div>
Going by your image it seems you want all text left aligned inside a div that is right aligned of the center.
Based on that, you can float the container right with all text aligned left.
.home-role-access-text {
border: 1px solid black;
text-align: left;
height: 20px;
width: 250px;
position: absolute;
top: 60%;
left: 50%;
margin-left: -125px;
font-size: 20px;
color: #026890;
}
.roles {
float:right
}
<div class="home-role-access-text" data-ng-show="alarmsCounter <= 0">
<div>
<div data-ng-hide="assignedRoles.length<=0" class="roles">
<div style="padding-bottom: 10px;"><b>Role(r)</b></div>
<div style="font-size:11px;font-weight: 100;display: block; text-align: left;" data-ng-repeat="role in assignedRoles">Role1 </div>
<div style="font-size:11px;font-weight: 100;display: block; text-align: left;" data-ng-repeat="role in assignedRoles">Role3 </div>
</div>
</div>
</div>
The black border in the example is only added to show the div is still centered with right aligned text - You can off course, remove it :)
I faced a problem with css and html. I need to center the text in the box. When I place text, all boxes are going bottom little bit.
Here is my code
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Add vertical-align: top; and text-align: center; to .box like this:
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
vertical-align: top;
text-align: center;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
To center the text vertical and horizontal and dont wanna care about the text length you can do it with the table - table-cell method like
.box {
width: 100px;
height: 100px;
background: #cce;
float: left;
margin-left: 10px;
display: table;
}
.box p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
This provides also a great browser support.
To center text in the blocks add text-align: center;
.box {
width: 100px;
height: 100px;
text-align: center;
vertical-align: top;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>