I am trying to make my h1 be inline within my box like this. Currently my H1 text is stacked on top of each other and looks like this. I want this to be inline rather than stacked on top of one and other, I have tried adding display: inline-block; and display: inline; to my H1 neither working. What do I need to add or remove from my H1 or box div to be able to achieve my H1 being inline!
HTML
<body>
<div class="box">
<h1>Centered Text</h1>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color: teal;
font-family: sans-serif;
}
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
width: 500px;
height: 100px;
background-color: red;
}
h1{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
font-size: 50px;
font-weight: lighter;
color: white;
}
Jfiddle
Your h1 has position: absolute, but no width setting. Just add width: 100%; to it to make it the width of its container so the texts fits into it in one line.
https://jsfiddle.net/80r16xgs/2/
Just add white-space: nowrap; to h1, see this fiddle.
Try using position: relative in h1.
You can check the result
Related
I am adding two images with a text inside a div which should occupy the whole left side of the screen. When I add the second image at the bottom. Half of the image goes out of the div and and the height of the div is not extended.
The screenshot is the output I am getting
Here is the code:
<section className="App">
<div className="First-Half">
<div className="wrapper">
<div className="Lacazette-Image">
<img alt="Lacazette" src={Lacazette}></img>
</div>
<div className="Arsenal-Fans">
Arsenal Fans
</div>
<div className="Celebrate-Image">
<img alt="Celebrations" src={Celebrations}></img>
</div>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Kanit|Lobster|Mansalva&display=swap');
.App {
font-family: 'Lobster', sans-serif;
text-align: center;
display: table;
}
.First-Half {
background-color: red;
position: absolute;
left: 0px;
height: 100%;
width: 50%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.Arsenal-Fans {
position: absolute;
height: 50px;
left: 74%;
top: 58%;
font-family: 'Lobster', sans-serif;
font-size: 55px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.22;
letter-spacing: normal;
text-align: left;
color: rgba(249, 246, 246, 0.97);
}
.Lacazette-Image img{
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0.8;
border: solid 1px #707070;
}
.Celebrate-Image img{
position: absolute;
width: 100%;
top: 67%;
left: 0;
opacity: 0.8;
border: solid 1px #707070;
}
https://codesandbox.io/s/crazy-bhaskara-6pj9y
By using
position: absolute;
on the images, you are removing them from the flow of the page, and the parent div will not grow with them. Instead of using absolute positioning for layout, you should consider using Flexbox or CSS Grid. These will also help you create a responsive site that will work well on different device sizes.
Here is a short example of how to use Flexbox for layout: https://jsfiddle.net/9swka2gL/
Edit: I like what #novruzrhmv said, but as in the example above, I recommend keeping the whole <h1> together if possible, both for SEO reasons and to make it easier if you collapse to 1 column on mobile. One way to do that is to force just the h1 wrapper to overflow the column as in the example above.
Add following codes to your .css file;
.Arsenal-Fans-In-Lebanon-Image img{width:100%}
How do I make this div stay in the middle of the page. Also how do I change the size of the div?
Html:
<div id="Text">
<p id="InsideT">
Hello
</p>
</div>
CSS:
#Text{
position: absolute;
width: 50%;
font-size: 60px;
text-align: center;
color: black;
height: 50%;
display: inline-block;
transform: translateY(-50%);
top: 50%;
margin: 0 auto;
color: black;
right: 320px;
background: white;
Use absolute positioning, and a transform to centre the div. The dimensions will then not matter, until the window size is smaller than the div.
.centred {
height: 50px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
}
<div class="centred">I am in the centre of the page</div>
You are already aligning the <div> horizontally with margin: 0 auto. Automatic margins centralise a <div> because it is a block-level element. However, you are applying a number of additional sections of code that break this alignment, such as position: absolute, right: 320px, top: 50% and transform: translateY(-50%).
Horizontal centering can be achieved with simply margin: 0 auto and text-align: center:
#Text {
font-size: 60px;
text-align: center;
margin: 0 auto;
}
<div id="Text">
<p id="InsideT">
Hello
</p>
</div>
Vertical centering is a little more complicated, and it's easiest to achieve both horizontal and vertical centering with flexbox, utilising the display: flex, align-items: center and justify-content: center property values. Note that you'll also need to specify a height property:
#Text {
height: 180px;
border: 5px solid black;
display: flex;
align-items: center;
justify-content: center;
}
<div id="Text">
<p id="InsideT">
Hello
</p>
</div>
Hope this helps! :)
You put position absolute which took the div out of it's DOM structure.I removed it and it fixed the issue.
HTML:
<div id="Text">
<p id="InsideT">
Hello
</p>
</div>
CSS:
#Text {
width: 50%;
font-size: 60px;
text-align: center;
color: black;
height: 50%;
transform: translateY(-50%);
margin: 0 auto;
color: black;
background: white;
}
You have to set
position: fixed;
You can use
top: ;
bottom: ;
right: ;
left: ;
to move it around and try to center it. The fixed position will keep the div in place, even when you scroll down.
I hope you find this useful.
If you are meaning the actual X,Y center of the page this will work.
#Text{
font-size: 60px;
color: black;
display: inline-block;
background: white;
margin: 50%;
}
You have to use position absolute in positioning the element to the center of the page. Use transform property in CSS. See below code:
.centerdiv{
width: 200px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: 0 auto;
transform: translate(0, -50%);
text-align: center;
}
<div class="centerdiv">centered element</div>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.card-wrapper {
min-height: 100vh;
background: url("https://flevix.com/wp-content/uploads/2019/12/Live-Background-1.svg");
background-repeat: no-repeat;
background-size: cover;
}
.centered-item {
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="card-wrapper">
<div class="centered-item">
<p>This will be at the center</p>
</div>
</div>
</body>
</html>
I need to create a responsive layout, wherein basically I have an image in center of screen, and text centered in the image.
I'm not sure how exactly to center all these things properly. I tried making the image a background-image in a div, but couldn't center it while making sure it'd grow/shrink as a screen did.
Now I'm not sure how to make it all very contained, without overflowing, and without setting a px size (which a lot of the help articles I've found specify).
This is my idea:
On my website at the moment I've made part of it work and it looks like this:
Except I need it also to be centered vertically and the span is as wide as the screen rather than as wide as the image.
https://jsfiddle.net/zb50azjx/
HTML:
<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>
CSS:
.news {
color: #191919;
font-size: 15pt;
}
.news div img {
z-index: 0;
margin-left: auto;
margin-right: auto;
position: relative;
display: inline-block;
}
.news div span {
z-index: 1;
position: absolute;
text-align:center;
left: 0;
width: 100%;
color: #000000;
}
.news {
color: #191919;
font-size: 15pt;
display:inline-block;
width: 100%;
position: relative;
}
.news div img {
z-index: 0;a
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
display: inline-block;
}
.news div span {
z-index: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>
you can make div within news as position relative and span as position:absolute and set top:40% and left:40% this would give you the text centered within the image
.news {
color: #191919;
font-size: 15pt;
}
div.content {
width: 100%;
position: relative;
}
.news div span {
position: absolute;
top: 40%;
left: 40%;
color: #000000;
}
<div class="news">
<div class="content">
<img src="http://m.elysiumrpg.com/images/newstitle.png" /><span>News Title</span>
</div>
</div>
Hope this helps
I'm not 100% clear on what text you want centered on the image but see if this is what you are after:
http://codepen.io/panchroma/pen/gLEGqb
Using a background image with CSS of background-size:contain; can be really useful sometimes, because it will scale the image well to fit the size of the div
I've simplified your HTML and CSS quite a bit.
Good luck
HTML
<div class="news">News Title </div>
CSS
.news {
color: #191919;
font-size: 15pt;
background:url('http://m.elysiumrpg.com/images/newstitle.png') ;
background-size:contain;
text-align:center;
padding:20px 0;
}
<html>
<head>
<h1>Hello.</h1>
</head>
<link rel="stylesheet" type="text/css" href="butters.css">
<link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">
<body></body>
</html>
+
h1{
font-family: 'Galada', cursive;
font-size: 400%;
position: relative;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
Link to fiddle.
I pretty much followed this tutorial.
I'm finding issues with it though because it creates a horizontal scroll bar, which I don't want and I don't believe it is centering horizontally. I just want it to be smack dab in the middle of the screen no matter the screen size but i'm not sure what CSS it'll take to do that.
I changed your CSS:
h1{
font-family: 'Galada', cursive;
font-size: 70px;
transform: translate(-50%,-50%);
position: absolute;
top: calc(50% - 35px);
left: 50%;
}
try changing position:relative to position:absolute
Two things - firstly, you have an h1 in your head, which is invalid, you'll want to move that to your body. From there, you need to give the body positioning for that 50% to be in reference to. It'll also need to get position:absolute for left and top to work properly. After that, you can do both a translateX and translateY to get it centered on both axis. Example below!
h1{
font-family: 'Galada', cursive;
font-size: 400%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
body{
width: 100%;
position: relative;
}
https://jsfiddle.net/will0220/pw4j2m36/1/
H1 should be in the BODY. It's not a valid HEAD element.
Vertical centering depends on height of the container too.
Use:
html,body {
height:100%;
}
http://www.codeply.com/go/u9kxrMCzK8
You need to replace top by margin-top for relative elements:
h1{
font-family: 'Galada', cursive;
font-size: 400%;
position: relative;
margin-top: 50%;
left: 50%;
transform: translateY(-50%);
}
<h1>Hello.</h1>
The easiest way to align text horizontally is "text-align: center", if You know vertical height, You can align vertically with "line-height: (value)px"
HTML
<body>
<h1>Hello.</h1>
</body>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1 {
font-family: 'Galada', cursive;
font-size: 400%;
text-align: center;
margin-top: 50%;
}
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