This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I have found a few posts related to this subject, but no answers seem to be working in my scenario, I am assuming due to my custom class for the checkbox.
Essentially I just want the text next to the checkbox to always vertically align with it, but the vertical alignment behavior is different based on whether the checkbox is checked or not.
I have made the font-size, height, and line-height equivalent for the text and checkbox, which seems to not have made a difference. I have also tried content: "\200b"; in the css but that also seems to not make a difference.
Also, I am unable to use "newer" html/css things because this is for an application that uses an older version of html/css before flexbox.
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
}
.checkboxBig {
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
padding-left: 1px;
text-align: center;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 22px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 22px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
<div>
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
You could use flexbox. In the snippet, I added a class of checkbox-wrapper to allow for targeting the div, and used align-items to center it.
.checkbox-wrapper {
display:flex;
align-items:center;
}
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
}
.checkboxBig {
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
font-size: 30px;
padding-left: 1px;
text-align: center;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 30px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 9px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
<div class="checkbox-wrapper">
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
Additionally, you could position the .lvl1Name if flex isn't an option. For that class, add a position:relative and a negative top value:
.lvl1Name {
position:relative;
top:-7px;
line-height: 22px;
height: 22px;
font-size: 22px;
}
In your case, with the same font-size, line-height and height just add vertical-align: bottom; to the checkbox.
.lvl1Name {
font-size: 22px;
}
.checkboxBig {
vertical-align: bottom;
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
padding-left: 1px;
text-align: center;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 22px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 22px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
<div>
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
Please try using position: absolute and top property on .lvlName class and set position: realtive property on the parent element.
position property sets how an element is positioned in a document.
For more about position property see mdn
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
position: absolute;
top: 5px;
}
.main-div {
position: relative;
}
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
position: absolute;
top: 5px;
}
.checkboxBig {
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
padding-left: 1px;
text-align: center;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 22px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 22px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
.main-div {
position: relative;
}
<div class="main-div">
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
You can add a class to the div containing both the elements and use flex box css.
.container{
display: flex;
align-items: center;
}
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
}
.checkboxBig {
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
font-size: 30px;
padding-left: 1px;
text-align: center;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 30px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 9px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
<div class="container">
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
If flex box is not something that you are looking for, then you can use vertical-align.
.lvl1Name {
line-height: 22px;
height: 22px;
font-size: 22px;
vertical-align: middle;
}
.checkboxBig {
-webkit-appearance: none;
width: 22px;
line-height: 22px;
height: 22px;
font-size: 22px;
background: white;
border-radius: 0px;
border: 2px solid #144b68;
line-height: 10px;
font-size: 30px;
padding-left: 1px;
text-align: center;
vertical-align: middle;
}
.checkboxBig:hover {
background: #80AED1;
}
.checkboxBig:checked {
background: #DAE5EB;
}
.checkboxBig:checked:after {
content: "\2713";
font-size: 30px;
padding-left: 1px;
text-align: center;
color: #144b68;
line-height: 9px;
}
.checkboxBig:checked:hover {
background: #80AED1;
}
<div>
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>
Try using the display:flex in the div. Using flexbox usually helps to solve a lot of problems like this.
Related
I need two texts to be stacked like this using CSS:
I tried this code:
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.special-order>span {
display: inline-block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.special-order>span {
background: #000000;
color: #f58220;
display: block;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I’m getting some space between the two texts. Help me with this.
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
span.special {
background: #000000;
color: #f58220;
display: block;
font-weight: 700;
line-height: 1.3;
padding: 0 4px;
border: 1px solid white;
border-radius: 2px;
}
.order {
display: inline-block;
font-weight: 600;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1;
border-radius: 1px;
}
<div class="sp-order">
<span class="special">Special </span>
<span class="order">Order</span>
</div>
You can try this :
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span:first-child {
display:block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.sp-order>span:last-child {
background: #000000;
color: #f58220;
padding: 0 2px;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Just change your second CSS selector to .sp-order>span
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span {
background: #000000;
color: #f58220;
display: block;
padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
background: #ddd;
color: #fa0;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I have an input field with the font size 45px. This field should have a placeholder with a font size 18px and vertical alignment of the placeholder should be the middle. I've tried the following code, but it doesn't work in Chrome and Opera.
Could you help me to find a solution without JavaScript.
<input type="text" placeholder="Start typing your postal code..." />
input {
width: 300px;
border: 2px solid red;
padding: 0px 5px;
line-height: 100px;
font-size: 45px;
}
::-webkit-input-placeholder {
font-size: 18px;
vertical-align: middle !important;
line-height: 100px !important;
color:#000;
text-align:center;
}
::-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
:-ms-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
:-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
I think you need to add input before your pseudo element. Try this:
input::-webkit-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input::-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input:-ms-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input::placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
EDIT
Styling placeholders seems limited. But a way to do it might be to use transform: translate(0, -50%);
input::placeholder {
font-size: 18px;
line-height: 100px;
text-align: center;
transform: translate(0, -50%);
}
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}
If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}
Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.
i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}
I can't make my background only in my text..allways go futher until the end of the screen.
Any idea what i'm doing wrong?
Here's my HTML:
<div class="textSlide">
<span id="firstTitle">We help you find everyone you</span>
<span id="secondTitle">need to get you started.</span>
<span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
<span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>
Here's my CSS:
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }
FIDDLE
Change the display: block, to display: inline-block;
http://jsfiddle.net/w456u/1/
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }