I need center to center some text on X and Y axes. I noticed that my text is not on full height, which is best solution to give text full height?
I tried to center with:
1. Line height
2. Transform
3. Flex
4. Table - table cell - vertical align
HTML:
<div class="block">
<p> 3 </p>
</div>
SCSS:
.block {
display: table;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
What I meant with full height
This height really matter, for Small font it's not visible but with
Large font it's really un-centered.
I expect to center this text.
I think flex is the best and universal method to center element on X and Y, so add
display: flex;justify-content: center;align-items: center; to you parent block. After that you can use anyone font-height what you want.
.block {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
}
p {
line-height: 20px;
}
<div class="block">
<p> 3 </p>
</div>
I found the problem, un-alignment was caused by font family, in my case I used Helvetica, after change text alignment fixed.
https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5
Related
I've tried putting together a simple scenario with css for a card style layout.
It looks ok on a 22 inch monitor, but when viewed on my samsung tv 1920x1080 resolution it does not look good.
It looks like the border has a white gap in it caused by anti-aliasing.
html
<main>
<div class="card-holder">
<div class="card-header">
<div class="card-icon">
<span class="icon icon-bell"></span>
</div>
<span class="card-title">Title</span>
</div>
<div class="card-about">
<span>Some about text.</span>
</div>
</div>
</main>
css
.card-holder {
border-radius: 10px 10px 0px 0px;
border: 3px solid rgb(0, 0, 0);
border-spacing: 0;
overflow: hidden;
width: 300px;
}
.card-header {
display: flex;
align-items: center;
padding: 5px;
background-color: rgb(0, 64, 255);
color: #fff;
overflow: hidden;
}
.card-title {
display: inline-block;
flex-grow: 1;
text-align: center;
}
.card-about {
display: block;
}
.card-icon {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
overflow: hidden;
height: 64px;
width: 64px;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
vertical-align: middle;
}
.icon-bell {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}
When I zoom the browser to 80% then a white line appears at the right hand side of the card.
Is there a recommended approach to make this scenario work nicely across different zoom levels and monitor resolutions?
I've been tearing my hair out.
Update
I made a codepen here
You're mixing relative and fixed units. Things like em and % will be different based on the browser, device, and zoom. Try using all relative or all fixed so the browser isn't trying to interpret them differently.
Example:
border-radius: 10px 10px 0 0;
vs
border-radius: 1em 1em 0px 0px;
I'm having an issue getting a spans' inner text to be vertically centered on Firefox
Here's a screenshot of the firefox devtools highlighting the span element.
This Works as expected on Chrome and Safari.
<button
style={{ marginTop: this.state.marginTop }}
className={`info-tab-title`}
>
<img
className="tab-icon"
src="/images/neighborhood/train.svg"
alt="train icon"
/>
<span>TO BROOKLYN</span>
</button>
.info-tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
background-color: #e5e8ea;
padding: 2% 4% 4% 4%;
margin-bottom: 8px;
cursor: pointer;
height: 100%;
max-height: calc(16.67% - 6px);
transition: 0.25s max-height ease-in-out;
&:last-child {
margin-bottom: 0;
}
.info-tab-title {
display: flex;
flex-direction: row;
align-items: flex-start;
font-family: 'BrownStd Regular';
font-size: 16px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 16px;
min-height: 26px !important;
align-items: center;
#media #{$mobile-break} {
font-size: 14px;
}
.tab-icon {
margin-right: 2.5%;
height: 100%;
width: auto;
}
}
}
Ideally, the text would be vertically centered inside the span.
This is not a duplicate, the suggested answers are all addressing aligning two elements in a parent. This is referring to a browser specific problem with aligning the innerHTML content of a span.
You are doing all right. Font metrics of BrownStd cause this issue. The distance from symbol baseline to bottom of font content area is bigger than distance to top.
Not sure you can perfectly align text and icon without some tricks like negative margins or absolute positioning.
You can read this article about font metrics, it's pretty hard to understand.
button {
display: inline-flex;
align-items: center;
padding: 10px;
height: 50px;
border: 1px solid;
}
div {
margin-right: 10px;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
}
span {
background-color: blue;
font-family: sans-serif;
color: white;
}
<h1>Nice font —</h1>
<button>
<div></div>
<span>nice vertical alignment</span>
</button>
Codepen demo with custom BrownStd font.
If by "innerHTML content of a span" you're referring to the bounding box of the text, I believe the only way to manipulate that in CSS is via line-height, and you can't change how the text is aligned within its line-height.
In this case, I would try reducing the line-height to the exact height of the text, and then align-items: center on the parent should work.
I want to make P to be able to take more text than the height can contain, just so the text can be scrolled down to be read. DIV CLASS="others" has the right height I want. (500px)
The problem is, when I use the overflow: scroll function it goes all the way to the bottom of the page.
EDIT: Forgot to mention I want the titles "News" and "Products" to be without the scroll bar.
Thanks.
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}
.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}
.others #news {
background-color: black;
color: white;
text-align: center;
}
.others #products {
background-color: black;
color: white;
text-align: center;
}
.others a {
color: white;
text-decoration: none !important;
}
.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}
.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<H3 ID="newsfeed">News</H3>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<H3 ID="productsfeed">Products</H3>
<P>Cool photos here.</P>
</DIV>
</DIV>
As I mentioned in my comment, the issue is caused by specifying an explicit height to the inner paragraphs.
Besides, in order to make the inner paragraphs respect the height of their parents (#news and #products flex items which have the same height of their flex container, the .other) you could change the display type of the parents to flex as well and set their flex-direction to column.
And then give flex: 1; to the paragraphs as follows:
Example Here
#news, #products {
display: flex;
flex-direction: column;
}
#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}
As a side-note: make sure you have included the old (prefixed) syntax of flexbox as well for the sake of browser support. You could use tools like Auto Prefixer to achieve that.
You need a containing div on the paragraphs, then set overflow: scroll; and height: 460px; on that container (or whatever height you need to have it contained within the 500px tall .others block).
You'd also need to make sure your .others div styling doesn't apply to that container - in my example below, I changed that selector to .others > div to only select immediate children of .others. And you should remove the height: 800px; from the inner paragraphs, as mentioned by Hashem Qolami.
jsfiddle example
I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.
.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}
.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}
<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>
Demo: http://jsfiddle.net/5UJWa/
.bluebox {
width: 400px;
background-color: blue;
height: 200px;
position: relative; /* allow absolute positioning within */
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
position: absolute; /* positioning */
top: 50%; /* 50% from the top (half way) */
margin-top: -5pt; /* bring it back up half the height of your text size */
width: 100%; /* to allow for the text align */
}
Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.
You can play with display: table-cell;.
Your new CSS:
.bluebox {
width: 400px;
background-color: blue;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
}
Check out the illustration on jsFiddle.
See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.
Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/
.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0;
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }
<div class="calcTest">
<div class="calcTestInner">
Hello Folks
</div>
</div>
I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?
You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here