When I create a div with h1 inside I set margin-left to h1 55vw(viewport-width). And it's ok with my 1378px-width monitor but when I decided to resize my browser h1 text start to outdone/outstrip the image. How can I set it right in the position I need to in any size of the screen(except of very high/low resolution).
HTML code:
<div class="logo-container">
<h1 class="text">
Netherlands
</h1>
</div>
Its CSS:
<style>
.logo-container {
background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat center;
padding: 28px 0 14px;
}
.text {
margin-top: 62px;
margin-left: 55vw;
font: 16px Arial;
font-weight: 700;
}
</style>
Try this Fiddle
The logo container is centered horizontally with auto margins. The text is positioned absolutely relative to the logo container. This way no matter where the logo ends up the text will absolutely be in the correct location.
HTML
<div class="logo-container">
<h1 class="text">
Netherlands
</h1>
</div>
CSS
.logo-container {
background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat;
height: 95px;
width: 269px;
margin: 0 auto;
position: relative;
}
.text {
position: absolute;
top: 60px;
left: 210px;
font: 16px Arial;
font-weight: 700;
}
You are either goign to need to set css media query breakpoints and create a responsive layout where you control where it sets on each size viewport or do somethign like center it that works no matter the size.
Or try this:
.logo-container {
background: url(https://www.google.com/images/srpr/logo9w.png) no-repeat center;
padding: 28px 0 14px;
text-align: center;
}
.text {
margin-top: 15px;
margin-left: 100px;
font: 16px Arial;
font-weight: 700;
text-align: center;
position: absolute;
}
Related
I'm playing around with html and css and have a question about the text-align functions.
I'm trying to build my own website and want the text-align set to start, but centred in the middle of the page. I've got it so that the content is centred, but when only text-align is set to centre. Is there a way to obtain centred text content but with text-align set to start? I don't particularly want to use padding (if it can be helped), as i've used it within this context and have had some responsive problems (which have had to be rectified with many media screen commands).
Sorry for the pretty noobie question.
HTML
.Container1 {
height: 100%;
width: 100%;
background: #e8eaed;
background-size: cover;
display: table;
margin: auto;
display: table;
top: 0;
}
.About {
font-family: 'Lato';
font-weight: 300;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
max-width: none;
}
.Content2 {
margin: 0 auto;
text-align: center;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
text-align: center;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
This is how i want the text to be aligned, but to be centred in the middle of the page...
Try to use Flexbox. Use align-item:center to center flex item vertically.
Stack Snippet
.Container1 {
height: 400px;
background: #e8eaed;
display: flex;
align-items: center;
}
.About {
font-family: 'Lato';
font-weight: 300;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
fixed the width and then set margin: 0 auto
Have a div (really a header element) and I've seen many sites these days display text content perfectly centered within the container. So I'm trying it out, but so far, it's too far to the top of the div than the center. The example is here: http://jsfiddle.net/nuoxpmrk/
HTML:
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<h1 class="entry-title">Title Goes Here</h1><p class="entry-subtitle">This is a Subtitle</p> <p class="entry-credits">Written by: JS Fiddle</p>
</section>
</header>
CSS:
.entry-header { position: relative; width: 100%; height: 640px; color: #FFF; }
.entry-caption { margin: 15% auto 0; padding: 32px; text-align: center; width: 100%; }
.entry-caption p.entry-subtitle { font-size: 18px; line-height: 1.25; text-transform: none; }
.entry-caption h1.entry-title { font-size: 38px; line-height: 1.25; }
.entry-caption p.entry-credits { font-size: 14px; line-height: 1; margin-bottom: 1em; text-transform: uppercase; }
Your margin: 15% auto 0; is what is making it top. You need to wrap everything inside a <div> and give the following styles to this:
.entry-header {
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
padding: 32px;
text-align: center;
width: 100%;
}
.entry-caption p.entry-subtitle {
font-size: 18px;
line-height: 1.25;
text-transform: none;
}
.entry-caption h1.entry-title {
font-size: 38px;
line-height: 1.25;
}
.entry-caption p.entry-credits {
font-size: 14px;
line-height: 1;
margin-bottom: 1em;
text-transform: uppercase;
}
.center {
width: 100%;
height: 180px;
position: absolute;
top: 50%;
left: 0;
margin-top: -90px;
overflow: hidden;
}
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<div class="center">
<h1 class="entry-title">Title Goes Here</h1>
<p class="entry-subtitle">This is a Subtitle</p>
<p class="entry-credits">Written by: JS Fiddle</p>
</div>
</section>
</header>
You can keep this very simple with CSS Flexbox. You just need to add three lines of code, and you can get rid of a bunch of code, as well.
Regardless of screen re-sizing vertically or horizontally, the centered items will remain centered.
HTML (no changes)
CSS
.entry-header {
display: flex; /* establish flex container */
justify-content: center; /* center child element (<section>) horizontally */
align-items: center; /* center child element (<section>) vertically */
/* No further changes */
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
/* margin: 15% auto 0; don't need this */
/* padding: 32px; don't need this */
text-align: center;
/* width: 100%; don't need this */
}
DEMO: http://jsfiddle.net/nuoxpmrk/2/
Note that flexbox is supported by all major browsers, except IE < 10.
I'm new to CSS, and I'm experiencing a lot of difficulty with aligning things.
At the moment, I have <h1> and <h2> text and an image. I'd like the <h2> text to reside right beneath the <h1> text, and I'd like this <h1>-<h2> block to be positioned in the top-left corner of the screen. I'd like the image to be inline with the text, but centered in the middle of the screen. This is what I have so far:
.header img {
width: 525px;
height: 188px;
text-align: center;
position: relative:
}
.header h1{
position: absolute;
left: 15px;
top: 35px;
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
background-color: rgba(37, 39, 37, 0.07);
float: left;
}
I can't for the life of me get this to work. Any help would be greatly appreciated.
Since you are using an absolute positioned layout your could absolute position your <img> to the center of the screen with these styles:
.header img {
position: absolute;
left:50%;
transform:translateX(-50%);
}
See this fiddle for a demo (fullscreen)
1: text-align aligned the content inside the element so setting text-align: center to .header img will no center align the img.
2: the h1 and h2 has by default display: block so that is why it place one bellow the other, set display: inline-block or inline to placed next to each other.
Now you can float: left h1 and h2 set text-align: center to div .header but you will note that the img will not centered in the middle of the screen
So do this
h1, h2{
display: inline-block;
font-family: 'Tehuti';
font-size: 1em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
background-color: rgba(37, 39, 37, 0.07);
}
.header{
text-align: center;
}
.header img {
width: 100px;
height: 100px;
}
.h-content{
position: absolute; /*If you want it to be always on the top-left of the screen, even when scrolls set fixed*/
left: 15px;
top: 35px;
}
<div class="header">
<div class="h-content">
<h1>I'm a h1</h1>
<h2>I'm a h2</h2>
</div>
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""/>
</div>
I hope this help you
I have a basic block(purple) that has some text inside it of variable length. The div is position relative and is also responsive so its width etc is in %.
Some of our users on Chrome latest (v43.0.2357.65) and WinXP see the text overflows to the edge of the purple box. This happens on a whim so its hard to reproduce. I am trying to fix the CSS so that text does not overflow. I have a max-width and break-word property too on the div that contains the text.
The site is in dutch.
<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">
This is where the text is.
</div>
</div>
</div>
And here is the CSS on the outermost div and the one containing the text :
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
background-color: #411E4E;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.mt-landing__section-notification__content {
margin: 0px 50px;
}
.mt-landing__section-notification__info-icon {
width: 50px;
float: left;
font-size: 24px;
}
.info-icon {
font-family: mt-icons;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.info-icon::before {
content: '\e617';
}
Any ideas why text is overflowing ?
It looks like your info-icon might be the culprit here.
either
a) Set the icon to position:absolute and the container to position:relative, which will take the icon out of the flow, so it won't push the text to the right,
or
b)
maybe use the icon as a background-image. Simply increase the padding-left of the container and add it as a background-image. I find this to be the easiest way to keep things in order, whilst still flexible and responsive:
https://jsfiddle.net/svArtist/s3xc3nro/
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.icon-info{
background: url(http://www.grafik-wunder.de/klafo/images/info.png) #411E4E no-repeat 10px center;
padding-left: 50px;
min-height: 50px;
box-sizing:border-box;
}
<div class="mt-landing__section-notification icon-info">
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">This is where the text is.</div>
</div>
</div>
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch