I have this layout:
My CSS:
body {
background: #e2eaed;
}
a {
text-decoration: none;
color: #fff;
font-size: 30px;
height: 62px;
line-height: 62px;
/* vertical-align: middle is not works */
background: #8dc73f;
width: 132px;
padding: 0 25px;
font-size: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px;
display: block;
float: left;
}
​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I use the line-height property. I have tried vertical-align but it is not working.
Please, see jsfiddle.
Another method would be using flexible boxes:
a {
display: inline-flex;
align-items: center; /* cross axis */
justify-content: center; /* main axis */
line-height: 1; /* reset */
}
You may need to add prefixes, see browser support and fiddle.
Vertical align only affects elements that displayed as table cells (or inline blocks, but effect on later is different). Those elements must not be floated.
a {
display: table-cell;
vertical-align: middle;
/* Reset */
float: none;
line-height: normal;
}
Related
the text is showing top aligned in Chrome/Safari but is vertically centered in Firefox. Is there a way to fix this so it's top aligned on Firefox? Here's the code and screenshot for firefox:
`select.compare-chart {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: none;
background: #F6F6F6;
border-radius: 4px;
display: flex;
color: #00256C;
font-size: 10px;
letter-spacing: 0;
line-height: 12px;
font-weight: 700;
width: 100%;
height: 198px;
padding: 12px;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
align-items: center;
white-space: normal;
text-overflow: ellipsis;
flex-direction: column;
background-position: center center;
background-size: 66px;
background-repeat: no-repeat;
}`
Chrome which is how it should look
Firefox -- how can I fix this to align top like in Chrome?
Thanks in advance!
I tried adding vertical-align: top but didn't have an effect on the alignment.
I'm not sure if this is what you mean, but try this
vertical-align:top;
This should work (tested in Chrome and Firefox). Change the align-items CSS line (either set it to 'left', or remove it, and add that following commented line of CSS.
select.compare-chart {
align-items: left; /*--either set to LEFT or remove--*/
}
/*--use this IF you remove the above CSS called align-items--*/
.flex-container > div > h3 {text-align: left; text-align: -moz-left;}
How do I make text spanning multiple lines, have each letter vertically aligned in CSS?
I have set the following using CSS.
word-spacing: 0px;
padding: 0px;
letter-spacing: 24px;
I think the mis-alignment is happening because I'm not using a monospaced font.
Is there a way to force all the characters in a font to be the same width to make things easier? All so they can all be vertically aligned when spanning multiple lines?
You can try out the code here.
For future reference I've copied the code below.
HTML
<div class="gridpaperfocus">
<p>paragraph one</p>
<p>paragraph two</p>
</div>
CSS
body {
font-family: Tahoma;
}
.gridpaperfocus {
background-image: url('https://i.imgur.com/HezKKmn.png');
background-color: #dcdcdc;
/* font-weight: bold; */
/* max-height: 100px; */
overflow: hidden;
position: relative;
box-sizing: border-box;
border-style: double;
margin: 16px;
/* color: rgb(255, 153, 51); */
color: #3c3c3c;
padding: 0px 30px;
/* padding: 0px; */
word-spacing: 0px;
margin-left: 32px;
letter-spacing: 24px;
line-height: 30px;
display: block;
width: 90%;
}
.gridpaperfocus p {
margin: 0px;
margin-top: 0px;
margin-bottom: 30px; /* 42px with gridpaperback.png */
}
.gridpaperfocus p:last-of-type { margin-bottom: 0px; }
If using a monospace font isn't possible then one way would be to wrap each character in a span element and force that to have a fixed width and the character to be centered within it.
Not very elegant and you'd want to employ some preprocessing rather than do it by hand - could be done fairly simply in Javascript.
Here's a trivial snippet with a couple of wide characters and a narrow one to show the idea:
span {
width: 24px;
display: inline-block;
text-align: center;
}
<span>A</span><span> </span><span>i</span><br><span>i</span><span>A</span><span>X</span>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
I have a mobile app, which contains a manually created icon - a circle with some text and number inside. It looks and works perfectly when testing it on PC; however, on a mobile device - text gots broken to a new line. I am sure there is enough space for it.
My question is - what can be the issue (something wrong in my CSS?), and how can it be fixed (for example, force it staying on the same line)?
CSS
.title-circle {
width: 65px;
height: 65px;
background-color: #eb5505;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 0.9375rem;
}
.title-circle-txt {
position: relative;
top: 0.2em;
color: #fff;
text-align: center;
font-size: 9.5px;
}
.title-circle-txt span {
font-size: 24px;
display: block;
line-height: 1;
}
HTML
<span class="title-circle">
<span class="title-circle-txt">
Point
<span>1</span>
</span>
</span>
you set .title-circle-txt span class css property display: block;. display: block; property creating the issue. change display: block; to display: inline-block; it will be fix.
.title-circle-txt span {
font-size: 24px;
display: inline-block; /* block to inline-block */
line-height: 1;
}
Here is the example.
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle