Updated!!!
I've still facing the same error each time I view the page on landscape screen devices.
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop">Eshop</div>
</div>
</div>
is there a way to make the spacing in between closer? When I command out
text-transform: uppercase;
the spacing is fine.
Aside of that, is there a way to make an image inside src under href to be centered?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<img src="..." alt="">
</div>
</div>
Try to change alignment text-align : justify; to text-align : left.
Or, if this is not what you like to do, letter-spacing is a CSS attibute to change space between charagcters, and word-spacing to change space between words
As other users suggested, consider forcing alignment on the left using text-align : left, you probably have text-align : justify; on a wrapper element or setted in another part of your css as depicted the example below.
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}
Related
With a div that has
height: 15px;
line-height: 15px;
I get these results:
what css can I use to make it v-align the text to middle regardless of its case?
You can also use table-cell display, which is compatible in most of the browsers versions.
You then just need to use text-align and vertical-align to make it perfectly centered.
body, html {
height: 100%;
}
body {
margin: 3rem;
}
span {
background-color: #4900CE;
color: white;
border-radius: 500px;
padding: 1rem;
min-width: 2.5rem;
text-align: center;
display: table-cell;
vertical-align: middle;
}
<span>ONE</span>
<br>
<span>one</span>
I've went ahead and tested this code in most of the iOS browsers with Browserstack. You can find all the results here (some of their hosts are broken, thus the white shots).
You can alternatively use flexbox with something like
span {
display: flex;
justify-content: center;
align-items: center;
}
I think your best bet would to be to work with em and ex here.
I have noticed that uppercase letters seem to be vertically centered by default. Most of the time, they have a height of around two thirds of 1em, while the height of lowercase letters is almost always exactly 1ex.
Knowing these things, you can give the lowercase letters an offset of calc(((-1em / 1.5) + 1ex) / 2), this moves the text up with half the size of the uppercase letters, and down half the size of the lowercase letters.
To be able to do this, you'll have to do some padding trickery, or simply wrap the text into another element, like a span.
Check out this Fiddle
html, body { height: 100% } *, ::before, ::after { position: relative }
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.flex.sans {
font-family: sans-serif;
}
.flex div {
font-size: 17vh;
background-color: #40C;
color: white;
border-radius: 1000px;
padding: .5em 1em;
margin: .25em;
}
#media (max-width: 200vh) { .flex div { font-size: 8.5vw } }
.flex div::after {
content: '';
display: block;
position: absolute;
top: calc(50% - .5px);
left: 0;
right: 0;
height: 1px;
background-color: #FFF;
}
.flex.centered div:last-child span {
top: calc(((-1em / 1.5) + 1ex) / 2);
}
<div class="flex">
Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered">
Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex sans">
Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered sans">
Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
There's a big chance this will work right away. If it doesn't, you can try changing 1.5 to some other value like 1.4 or 1.75.
See below example:
.capsule{
border-radius:30px;
height:30px;
background:blue;
position: relative;
display:inline-block;
padding:0 15px;
text-align:center;
color:#fff;
font-family:Arial;
}
.capsule>span{
position:absolute;
width:100%;
left:0;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.capsule > i {
opacity:0;
}
<div class="capsule">
<span> ONE </span>
<i> ONE </i>
</div>
<hr/>
<div class="capsule">
<span> one </span>
<i> one </i>
</div>
<hr/>
<div class="capsule">
<span> TWO </span>
<i> TWO </i>
</div>
<hr/>
<div class="capsule">
<span> two </span>
<i> two </i>
</div>
This will work on all browsers except IE 8. You can see working example here.
What if your word would have ascenders ( the part of the letters going higher to the letter x like ftlkidhjb ) or descender (like jyqp) then the text will poke out of the edges of your button. That's why it seems not centered. The only solution to make it feel centered is to make the button as high as 2 or 3 times the line height.
You can use flex:
.badge {
width: 100px;
height: 50px;
border-radius: 50px;
background: blue;
color: white;
display: flex;
display: -webkit-flex; /* Safari prefix */
justify-content: center;
-webkit-justify-content: center; /* Safari prefix */
flex-direction: column;
-webkit-flex-direction: column; /* Safari prefix */
font-family: Arial;
font-size: 14px;
text-align: center;
}
.badge.large {
font-size: 24px;
}
<p>Large badge:</p>
<div class="badge large">
ONE
</div>
<p>Normal badge:</p>
<div class="badge">
two
</div>
JSFiddle
Here is the solution. The problem is basically font Vertical Metrics which is actually issue.
I recommend use google font if you can if not than,
Go to http://www.fontsquirrel.com/tools/webfont-generator
Note: Do not use blacklisted font. If you want, go for license.
Upload the font you want to use;
choose “EXPERT…”
Select EOT Lite if you require IE support;
In Rendering section, check “Fix Vertical Metrics”; (This is Important)
This will fix Vertical Metrics which will fix your line-height issue.
CSS Recommendation:
Use default body line-height 1.4 or 1.42857143 do not relay on line-height: normal because different browser has different default value.
To make lower case text aligned you have to offset it manually to compensate for the extra height that would have to be occupied by upper case text, but that would make uppercase text misaligned. You can make your divs look inline or inline-flex and then you can simply force all text in these badges to be uppercase:
.up div {
height: 15px;
line-height: 15px;
background-color: blue;
color: white;
border-radius: 500px;
padding: 0.3em 0.7em;
display: inline;
font-family: arial;
text-transform: uppercase;
}
<div class="up">
<div>ONE</div> <div>One</div> <div>one</div>
</div>
Or lowercase+offset:
.low div {
height: 15px;
line-height: 15px;
background-color: blue;
color: white;
border-radius: 500px;
padding: 0.2em 0.7em 0.4em 0.7em;
display: inline;
font-family: arial;
text-transform: lowercase;
}
<div class="low">
<div>ONE</div> <div>One</div> <div>one</div>
</div>
Here's the output on iPhone 5:
I am facing a problem with fixed position. I have two rows on top of each other and I want them to look like this:
which is what I want. Now because I need to use position fixed in my project to have the second row docked I changed the position to fixed. here is my css file:
.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}
.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position:fixed;
}
Now here is what I get :
As you see the second div does not fill all its container.
Also here is my jsfiddle:
jsfiddle
Can anyone help?
Just use width: 100%.
* {
margin: 0;
padding: 0;
}
.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}
.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position: fixed;
width: 100%;
}
<div class="container-fluid">
<div class="row header">
<div class="col-xs-12">
</div>
</div>
<div class="row" style="position:relative;">
<div class="col-xs-12 story-board-header">
eweweweewew
</div>
</div>
</div>
You forgot to link bootstrap.css to project:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
https://jsfiddle.net/pb7vptm8/1/
I am not 100% sure of what you are trying to accomplish.
Position fixed makes the element relative to the browser window and not it's container (source).
You can use both width: 100% or left: 0; right: 0; to make the element as width as the whole screen.
Fixed also causes the element to stay in place when you scroll the page. Is that what you want?
Today I was having an awful lot of trouble getting some small text vertically centered within elements that were circle which were created using border-radius.
Some of the elements looked fine, but one in particular (a lowercase e was too close to the bottom); I had 2px of padding and it seemed to look fine; however once viewed on a mobile device it was slightly lower.
Here is some code that is as close of a replica as I could come up with to show the issue; you will notice this text has a similar issue with the lowercase e being too close to the bottom.
HTML:
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
CSS:
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
display: inline-block;
text-align: center;
width: 24px;
height: 24px;
line-height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
.option .text {
padding-left: 10px;
}
JSFiddle: http://jsfiddle.net/7bygsgn1/7/
Whilst I haven't tried them with the particular code on jsfiddle, when I was having the issue today I tried a whole range of centering techniques including:
Using line-height
Using absolute positioning
Using vertical-align: middle; in conjunction with display: table-cell;
Negative Margins
Using the method explained here.
Either it had no affect on the centering or caused the shape of the circle to change.
Is there any way you can reliably vertically center in situations such as this?
You may use an inline-block pseudo-element with an height of 24px / 100% , and vertical-align it to middle.
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
display: inline-block;
text-align: center;
width: 24px;
height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
/* here the pseudo-element method */
.option .icon:before {
content: '';
display: inline-block;
padding-top: 100%;/* cause here we have a square and width for percentage vertical (padding/margin) is the reference , height:100%; or height:24px; will do as well */
vertical-align: middle;
}
/* end update */
.option .text {
padding-left: 10px;
}
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
or display:flex; , the most simple:
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
/* next-three lines to center content both axis */
display: inline-flex;
justify-content:center;
align-items:center;
/*text-align: center;*/
width: 24px;
height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
.option .text {
padding-left: 10px;
}
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
Vertically/Horizontally center anything inside a parent element without knowing the heights/widths of either:
/* This parent can be any width and height */
.parent {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
}
Essentially this creates a ghost element inside the parent that allows the child to be positioned relative to it. The height: 100% allows the vertical-align: middle to do its job properly.
Hope this helps!
Edit: Credit to https://css-tricks.com/centering-in-the-unknown/
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}
CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.
#bannerText {
line-height: 60px;
}
Is one way..
I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.
Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.