Here is the code.
The text align wont work.
html {
position: fixed;
top: -50px;
background-color: #c4f3ff;
}
div {
width: 100%;
height: 50px;
text-align: center;
}
h1 {
font-family: monospace;
line-height: normal;
color: #fffb29;
font-size: 50px;
position: fixed;
top: -20px;
}
Here is a screen shot of the result
You mean the yellow text need to be align to center/right or somewhere?
If so, you just use:
h1{
width:100%;
text-align:center;
}
In your css file you marked your html (??) and all your divs with
position: fixed;
Position fixed elements will need a width as well. add
width: 100%;
or
width: 100vw;
So it can center your text.
Related
I am trying to build a sidebar with centered vertical elements like this design:
I couldn't figure it out after 2 hours so I decided to ask you guys if somebody could help me since I can't find any good links that can provide helpful information.
I think I am doing something wrong in the following sidenav class:
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 150px;
height: 100%;
color: #e1ffff;
}
Check JsFiddle.
First the a href must be inside the li element..
use flexbox.
ul {
position: fixed;
z-index: 1;
top: auto;
bottom: auto;
left: 0;
/*right: 0;*/
margin: auto;
height: 100%;
width: 100%;
padding: 50px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
ul li {
display:block;
width:100%;
}
Try this updated fiddle
OK try this
with more elements
I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered.
Here is where I got : http://jsfiddle.net/r8rFc/910/
.img-overlay {
position: relative;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
.centered-text
{
display:table;
height:100%;
width:100%;
text-align:center;
vertical-align:center;
}
I am able to center the text horizontally, but I cannot make it vertically... I really have no clue how to do that. All I checked was either non responsive, or it was just a logo at the center of the overlay...
Thanks !
Thanks to Henrique Barcelos, I have been able to solve the issue.
Here is the fiddle giving the solution : http://jsfiddle.net/r8rFc/912/
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
display:flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
How about setting
.project-overlay as such
.project-overlay {
position: absolute;
top: 45%;
left: 0;
text-align: center;
width: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
With this you can try setting a wrapper div to set the background color to whatever color it is that you want
I'm playing around with HTML & CSS and is trying to make a pretty simple "under contruction" page. I made the background black and text white. I placed the text where I wanted and are not trying to insert an image below the text. I got the image into the site, but somehow it is behind my background? Anyone who got a clue what to do?
Heres my CSS code:
.fullscreenDiv {
background-color: #000000;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
background-attachment:fixed;
}
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -190px;
white-space: nowrap;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
}
.trademark {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: 250px;
margin-left: 400px;
white-space: nowrap;
font-family: Century Gothic
font-size: 80%;
color: #FFFFFF;
}
And my HTML:
<div class='fullscreenDiv'>
<div class="center">Our website is currently under construction.</div>
</div>
<div class='fullScreenDiv'>
<div class="trademark">#GameAdviser - Copyright 2014</div>
</div>
EDIT:
Just a quick problem now, I made it worked placed my picture, and uploaded it to my FTP, now when I enter the website I can't see my picture, just a border with the "image not aviable" image or whatever it is. Seems strange since I had a picture before which worked fine.
Tried to change it from png to jpeg but didn't make a difference.
You can use z-index like
z-index:199; // for the Element you want on top
z-index:-199; // for the Element you want at bottom
Add z-index property to .center and change the class name fullscreenDiv instead of fullScreenDiv case sensitive.
Try this code:
DEMO
.center {
position: absolute;
width: 60%;
height: 50px;
top: 50%;
left: 20%;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
z-index: 10;
text-align: center;
}
I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
Thanks for any useful replies.
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
Edit
I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know.
jsFiddle
By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.
/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
content: "";
/*the Y value:*/
height: 100px;
width: 0px;
display: inline-block;
}
/**
The rest (only for this demo)
**/
body{
font-family: sans-serif;
font-size: 60px;
margin: 0;
}
body::before{
content: "";
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 2px;
margin: -1px 0;
background-color: #00D500;
z-index: 1;
}
body::after{
content: "";
display: block;
position: absolute;
top: 100px;
left: 200px;
height: 8px;
width: 8px;
margin: -4px;
border-radius: 50%;
background-color: #FF0077;
z-index: 1;
}
.text {
margin: 0;
position: absolute;
/*the X value:*/
left: 200px;
}
<p class="text">css=powerful</p>
Try this :
HTML :
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS :
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
if you want to change the position, change the "height" and the "left" parameters of the #text-holder
This way you will be able to control your basepoint position.
I put the height judger and some color so you can see if it's what you exepct.
EDIT : Changed the #text margin unit to em.
JSFiddle
I want to have a big image that has a width of 100% and a height of about 70% of the screen. On this image I want some text ontop of this image and this text needs to go right in the middle of the image. In a nutshell: how can I center horizontal and vertical this text in a 100% width image?:
<div id="top-area">
<img src="img/startphoto.jpg" alt="background image #1" />
<p>Some text</p>
</div>
#top-area img{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p{
position: relative;
text-align: center;
margin-top: 330px;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
I know I use margin-top to get the horizontal place of the text, but this feels like the wrong way. Anyone got beter suggestions?
You could assign position:absolute to the img and p element. You would then declare top:40%; on the p element to vertical centralise it. The reason I use 40% is due to the size of the text you're using. You could use 50% and then with javascript calculate the height of the text and assign a top negative margin to it. This is only required if your text height will vary dynamically.
DEMO http://jsfiddle.net/fRbNe/
html, body {
height: 100%;
}
#top-area {
position: relative;
height: 70%;
width:100%;
}
#top-area img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p {
margin:0;
padding:0;
text-align: center;
top:40%;
height: 100%;
width:100%;
position: absolute;
color: white;
font-family:'Montserrat', sans-serif;
font-size: 3em;
}
Here is your code refactored to work. It makes the top-area the one that determines the size of the image as the image just fills the space. Then centers the text by moving it left and top 50% of the top-area's size and then translating it back 50% of the p's size. This is a sure fire way for any sized image and any size of text.
<div id="top-area">
<img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" />
<p>Some text</p>
</div>
#top-area {
position: relative;
width: 100%;
height: 70%;
}
#top-area img{
width: 100%;
height: 100%;
}
#top-area p{
position: absolute;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}
Codepen to see it working:http://cdpn.io/zFJgh
I believe Travis's answer would require browser support for background size which is still lacking for IE8. Something like this should work though, placing both the image and a span in a div:
div.largeImageContainer,
img.largeImage{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
div.largeImageContainer{
top: 30%;
text-align: center;
}
span.largeImageText{
position: relative;
top: 50%;
line-height: 16px;
margin-top: -8px;
}
All the proposed solutions so far aren't "ideal".
First of all if your image does not belong to the content itself, do not use an image element. Instead apply it as a background-image.
Using the new CSS3 background options you can additionally set e.g. the background-size, -clip, -origin and so on ...!
And to horizontally and vertically centering your text in the element, simply set its display value to 'table-cell' and 'text-align: center' and 'vertical-align: middle' - that's it.
<div id="top-area">
<p>Some text</p>
</div>
html, body {height: 100%;}
#top-area {
display: table;
width: 100%;
height: 70%;
border: 1px solid red;
/*background-image: ... */
}
#top-area p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
See jsFiddle
Browser Support: IE 8+ and all "modern" browsers
PS: The "modern way" will be using Flexbox