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;
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my JSFiddle: https://jsfiddle.net/kris_redden/34jyLpok/
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
}
.wrapper-div {
vertical-align: middle
}
.button {
background: #e8e8e8;
display: inline-block;
font-size: 12px position: relative;
}
<div class="modal-footer">
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
</div>
I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do.
Easiest would be to add the following to .modal-footer
display: flex;
align-items: center;
this can also be achieved by using
.button-container{
position:relative;
height:100%;
}
.button{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
vertical-align:middle; is not necessary here. i would use this method if button container height is unknown and if i could not use flex-box (dispaly:flex;) instead.
https://jsfiddle.net/34jyLpok/7/
another option is to use flex-box (display:flex;)
.button-container{
height:100%;
display: flex;
//flex-direction: column;//only vertical
align-items: center;//both vertical and horizonal
justify-content: center
}
.button{
width:100px;
}
the problem with display: flex is that it is not fully supported in old IE browser versions.
https://jsfiddle.net/34jyLpok/9/
.modal-footer {
display: table;
width: 100%;
}
.wrapper-div {
display: table-cell;
vertical-align: middle
}
Go for something like this. Here is the fiddle.
You can use flexbox as shown below
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display: flex;
align-items: center;
justify-content: center;
}
You can change your style to this
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display:table;
width: 100%;
}
.wrapper-div {
display:table-cell;
vertical-align: middle;
}
.button {
background: #e8e8e8;
display: block;
margin:auto;
font-size: 12px
position: relative;
}
You can remove margin:auto; from .button to only vertically center button
See on fiddle
This is one way of doing it.
.wrapper-div {
line-height: 60px; // ex: 60px, The button will center to line-height.
}
.wrapper-div button {
// height of button must be less than its parent.
height: 30px;
display: inline-block;
vertical-align: baseline;
}
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
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;
}
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
as said in the title all i need is centering vertically a title h1 in the middle of a div.
this is a very simple code :
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
This is a demo here
After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please
What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?
Solution #1
Add display:table; to container and display:table-cell; to h1
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display:table; /* <---- */
}
h1{
vertical-align:middle;
display:table-cell; /* <--- */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: table;
}
h1 {
vertical-align: middle;
display: table-cell;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #2 : Flexbox
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display: flex;
align-items: center; /* align vertical */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
/* align vertical */
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #3 - Transforms
h1
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #4 Add a Pseudo element with 100% height
.container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
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 do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}