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;
}
Related
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;
I've seen this asked many times, none of the solutions are working for me. As you can see in the Fiddle this is working exactly how I want it to in Chrome, but in IE the text is stuck at the top of the box, instead of in the middle. If you run it in IE browser and Chrome side by side you'll see what I mean. I want it in the middle exactly, using margin:auto; works perfectly in chrome, but in IE it doesn't. I'm not sure of a fix that will move the paragraph down so it is aligned in the middle both vertically and horizontally.
<section class="info">
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
</section>
CSS:
.info{
display:flex;
width:325px;
margin:auto;
}
.infofont{
font-weight:bold;
text-align:center;
margin:auto;
}
https://jsfiddle.net/fmu8g38h/
try this instead:
.info{
display:flex;
top:50%;
left:50%;
transform: translate(-50%, -50%);
position:absolute;
}
https://jsfiddle.net/k1cbjvj7/1/
margin:auto is used to align the texts horizontally.
to align in center the top portion must be aligned seperately
You forgot to write flex-direction: row / column; align-items: center; justify-content: center; for when display is flex and inside content will be vertically and horizontally center and you should remove margin: auto; from .infofont class.
Below is update your CSS code.
.info{
border: 1px solid black;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
width: 325px;
margin:auto auto;
height: 500px;
}
.infofont{
font-weight:bold;
text-align:center;
}
Check the snipped
.info{
border: 1px solid black;
align-items: center;
display:flex;
flex-direction: row;
justify-content: center;
width:325px;
margin:auto auto;
height:500px;
}
.infofont{
color: green;
font-size: 16px;
font-weight:bold;
line-height: 1.2;
margin: 0;
text-align:center;
}
*,
*:after,
*:before{
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
<section class="info">
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
</section>
Note: I test this code only IE11, Chrome and Safari.
I am trying to make a fancy header. Here is the JSFiddle for you to see how it looks like before I explain my issue.
This header is great in medium/big screen width, but the problem comes at smaller screen width, where the text does not fit in that width and gets overlapped by the right div.
Here is the html/css(same as JSFIddle). Below I will explain what I want to achieve
html:
<div class="header">
<div class="left"></div>
<div class="text">
<span>TITLE</span>
</div>
<div class="right"></div>
</div>
css:
div.header{
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
display: block;
margin-bottom:30px;
}
div.header .left{
background-color: #D82B38;
width:10%;
height:30px;
display: inline-block;
float:left;
border-radius:0 15px 0 0;
}
div.header .text{
width:20%;
display: inline-block;
height:30px;
float:left;
}
div.header .right{
background-color: #D82B38;
width:70%;
height:30px;
display: inline-block;
float:right;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
I would like to give some left and right paddings to div.text, and make it's width depend on the size of the text, and then div.left and div.right takes their width depending on the remaining width of the screen(always being the left one a lot smaller than the right one), instead of always having the same percentage. I know I could play with media queries to change that percentage in smaller screens, but I know media queries does not work well in internet explorer and I prefer to avoid them.
I tried several things using CSS to get this, but I can't get it to work. Please tell me if my question is quite unclear and I will try to clarify what I mean.
Thanks in advance!
EIDT: I do not want to use javascript for this, I know there must be some way to achieve it using purely CSS
You can use Flexbox
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
vertical-align: middle;
}
.flex-item-fixed {
-webkit-flex: 0 70px;
flex: 0 70px;
text-align: center;
}
.flex-item-fixed1 {
-webkit-flex: 0 10%;
flex: 0 10%;
}
.left {
background-color: #D82B38;
display: block;
border-radius: 0 15px 0 0;
height: 30px;
}
.right {
background-color: #D82B38;
height: 30px;
display: inline-block;
float: right;
border-radius: 0 0 0 15px;
}
DEMO HERE
Flexible widths (percentages) are the key to responsive web design, but in some cases, this is not the way to go. In this case in particular, you want to keep the right side of the header responsive meanwhile the left side, including the text, is static. That avoids any flickering and movement, as well as excess #media queries. You can keep the responsiveness by employing the calc function.
Here is what I did. I gave the left side and the text a 350px width shared between the two. (100px and 250px). 350px is well within the width of any smartphone. And I told the right side to make it 100% - 350px. That makes the right side respect the left side and adjust accordingly.
SCSS/LESS - If you were using LESS or SCSS/SASS you will have a real winner here, because you can store these two fixed widths in variables and then if you ever needed to change these values, LESS or SCSS/SASS would adjust everything for you.
Here is your new CSS:
div.header{
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
display: block;
margin-bottom:30px;
}
div.header .left{
background-color: #D82B38;
width:150px;
height:30px;
display: inline-block;
float:left;
border-radius:0 15px 0 0;
}
div.header .text{
width:200px;
display: inline-block;
height:30px;
float:left;
}
div.header .right{
background-color: #D82B38;
width: calc(100% - 350px);
height:30px;
display: inline-block;
float:right;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
And here is how it looks like in a DEMO
EDIT
As an alternative option, you can distribute the widths and use media queries to re-adjust. This is something you will be able to use in older browsers. To center the text accordingly, you have 2 options, 1. is depicted in my DEMO after I edited it. using position left and transform. And if that gives you problems with older browsers, option 2 is to wrap the text is another div and center align its content. See the DEMO again for the alternative option
This one works from IE8 but uses flex if it's supported by the browser.
div.header{
display: table;
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
margin-bottom:30px;
}
div.header .left{
display: table-cell;
background-color: #D82B38;
width:10%;
height:30px;
border-radius:0 15px 0 0;
}
div.header .text{
display: table-cell;
width:20%;
height:30px;
}
div.header .right{
display: table-cell;
background-color: #D82B38;
width:70%;
height:30px;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
#supports (display: flex) {
div.header{
display: flex;
}
div.header .left{
display: block;
}
div.header .text{
display: block;
min-width: 90px;
}
div.header .right{
display: block;
}
}
<div class="header">
<div class="left"></div>
<div class="text">
<span>TITLE</span>
</div>
<div class="right"></div>
</div>
I have like this little box with text inside, but it is stuck in the top, I have tried using Vertical Align it did not help, here is the code:
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline;
vertical-align:middle;
}
jsfiddle link:
http://jsfiddle.net/2Hq3s/
I need the text to be in the absolute middle without enlarging the text.
Add to .Letters
line-height:40px; /* Same value as your 'height' */
vertical-align:middle;
DEMO
Use display: table, table-cell, like here: http://jsfiddle.net/maximgladkov/MALAj/
HTML
<p class="Letters">
<span>aasdfasd<br/>asdfasdfasdf</span>
</p>
CSS
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:400px;
width: 400px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: table;
}
.Letters span {
display: table-cell;
vertical-align: middle;
}
Use absolute positioning
top:50%;
bottom:50%;
position:absolute;
http://jsfiddle.net/2Hq3s/3/
Use display:table-cell on parent to use vertical align property
Here is a fiddle
<div class="parent">
<p class="Letters">a</p>
</div>
.parent{
background-color:#3594F0;
display:table-cell;
}
I am trying to make a footer for my website.
I want 2 divs and one list to be inline in this footer. But that is not happening. I used the css the CSS Property display:inline-block. What happens is that the divs get aligned but the list element just shifts a bit down.
Here is the jsFiddle Link: http://jsfiddle.net/tw2Wp/2/.
If you see the JSfiddle, you will that the three divs with class footerContents are not aligned in-line.
Could someone please explain me why this is happening? Is it right thing to use inline-block for this thing or is there some better way(I'm sure that there is)?
Please add vertical-align to .footerContents:
.footerContents {
display: inline-block;
width: 200px;
height: 200px;
padding: 5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
vertical-align: top; /* <<< */
}
Demo
Would you use the css3 flexbox module, like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#footer {
height:auto;
width:100%;
background-color:#666;
background-image:url(footer_shade.png);
background-repeat:no-repeat;
background-position:50% 0;
border-top:1px solid #FFF;
color:#fff;
font-family:'Bree Serif',serif;
font-size:16px;
line-height:20px;
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.footerContents {
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin: 20px;
margin-bottom: 5px;
background-color: red;
-moz-flex-box:1;
-webkit-flex-box:1;
-ms-flex:1 1 200px;
-webkit-flex: 1 1 200px;
flex:1 1 200px;
}
Please view the demo. and some about the flexbox, if you want to know,please will click here and here.
A solution would be to float the elements rather than using inline-block, see working example here: http://jsfiddle.net/tw2Wp/2/
Note that I also added an extra div with the class clear which will clear the floats. By doing this your background will appear again. Because of the floated elements the parent div doesn't have a clue how large it should be (so it's height 0).
.clear{
clear:both;
}
You can do like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#footer {
height:auto;
width:100%;
background-color:#666;
background-image:url(footer_shade.png);
background-repeat:no-repeat;
background-position:50% 0;
border-top:1px solid #FFF;
color:#fff;
font-family:'Bree Serif',serif;
font-size:16px;
line-height:20px;
**white-space: nowrap;**
}
.footerContents {
display:inline-block;
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
**vertical-align: top;
white-space: normal;**
}
please view the new demo.