I am trying to center text within the context of the div it sits in. I want:
I have:
#previewOnlyWarning span{color: white; text-align: center; font-weight: bold; font-size: 150%; left: 37%; top: 0.8%;}
#previewOnlyWarning {position:absolute; top: 0%; left: 35%; width: 25%; height: 4.5%; background: #ff0000; display:block; z-index: 1100}
In template this sites at the highest level, siblings to high elements, highest z-index of course:
<div id="previewOnlyWarning"><span>FOR PREVIEW ONLY<br><br>
Do not distribute links from this site.</span>
</div>
I get this:
These pics are missing about 1/3 of the page to the right of them but show the point.
When I had text in p tags not in one single span it sat low (red space above it) and was ugly. How can I center this text that already has text-align:center? Thank you
The <span> is an inline element, the width is decided by the content it contains, so text-align doesn't have any effects.
You could set text-align:center; on the container, which is a block element <div>.
#previewOnlyWarning {
background: silver;
text-align: center;
}
#previewOnlyWarning span {
}
<div id="previewOnlyWarning">
<span>FOR PREVIEW ONLY<br><br> Do not distribute links from this site.</span>
</div>
Or set span{display:block;} to make it occupies the container width.
#previewOnlyWarning {
background: silver;
}
#previewOnlyWarning span {
display: block;
text-align: center;
}
<div id="previewOnlyWarning">
<span>FOR PREVIEW ONLY<br><br> Do not distribute links from this site.</span>
</div>
Related
I'm trying to center a text element and then have an explanatory "what is this?" next to it. However when I type in the "what is this?" part, it obviously moves the original text element off center. Is there a way to fix this using CSS or HTML?
You can wrap the text-element that needs to be centered in a div and style position:absolute to that div using CSS.
Here is an example without having to assign width to any elements. This should work fine with any length of text thrown at it.
http://codepen.io/ay13/pen/GJKawz
HTML and CSS:
h1 {
text-align: center;
}
h1 a {
position: absolute;
margin-left: 10px;
}
<h1>
<span>Centered Text What is this?</span>
</h1>
Here's an example of how you can do it:
http://jsfiddle.net/wgbs4asv/1/
You basically need to have the right-side "what is this?" div inside of the main div (and before the main div's content), but with the right-side "what is this?" div's CSS set to:
float: right;
width: 100px;
margin-right: -100px;
position: relative;
(but using whatever width you want, and with a negative margin-right to match the width). The width would offset the main div's position, but then the negative margin with the position: relative brings it back.
It will be better if you share your code.
but anyway, you will need to position the text relative and then add the explanatory in it and position it to absolute, here is the code to make things clear.
.parent {
width: 80%;
background: lightblue;
display: flex;
justify-content: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 80px;
background: lightslategrey;
border: 1px solid red;
}
.text {
position: relative;
width: fit-content;
background: lightcoral;
text-align: center;
}
.explanatory {
width: max-content;
position: absolute;
z-index: 10;
color: white;
}
<div class="parent">
<span class="container">
<p class="text">text text text
<span class="explanatory">what is this?</span>
</p>
</span>
</div>
I am trying to create a header for my website, however I am trying to figure out the best to way align it.
The header is something along the lines of "Welcome to SHEP at the University of XXXX". However, I am trying to make the sentence be centered around the word "SHEP". In other words, I'm trying to make the "SHEP" portion of the sentence be dead-center on the page.
I've tried a few methods such as <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> and setting the span to align center, however I can't quite get it working.
I'm looking to achieve the look as displayed in #1, not #2:
HTML:
<div class="container">
<h1>
<span>Welcome to</span>
SHEP
<span>at the University of XXX</span>
</h1>
</div>
CSS:
.container {
display: block;
text-align: center;
}
h1 {
position: relative;
display: inline-block;
text-align: center;
}
span {
position: absolute;
top: 0;
white-space: nowrap;
}
span:nth-of-type(1) { right: 100%; }
span:nth-of-type(2) { left: 100%; }
See Fiddle
Use display:table for a wrapper div and then display:table-cell for the child elements. They'll take up the width of the wrapper evenly. So, your markup would be something like this:
HTML
<div id="nav-wrap">
<div id="nav-left">
<p>Welcome to</p>
</div>
<div id="nav-center">
<p>SHEP</p>
</div>
<div id="nav-right">
<p>at the University of XXX</p>
</div>
</div>
CSS
#nav-wrap {
display:table;
width:100%;
}
#nav-wrap > div {
display:table-cell;
text-align:center;
border:1px solid black; /* here to show how the cells are aligned */
width:33%;
}
Of course, you would style your text within each child div accordingly.
http://codepen.io/bbennett/pen/zxKZLb
Create space with in the span using padding and it will give the appearance that the text is centered:
span{
padding: 0 10px;
}
You could use margin, for instance:
span {
margin: 25%;
}
http://jsfiddle.net/yjw0t27r/1/
you can use pseudo element :before and :after and position it using absolute now h1 is aligned from the Shep word
div {
text-align: center
}
h1 {
display: inline-block;
position: relative;
border: 1px solid red;
}
h1:before {
content: 'Welcome to ';
position: absolute;
right: 50px;
width: 238px;
}
h1:after {
content: ' at the University of XXXX';
position: absolute;
left: 50px;
width: 434px;
}
<div>
<h1>SHEP</h1>
</div>
Your best option is to give the header tag the following:
h1{
display: inline-block;
position: relative;
left: 50%;
margin-left: -120px;
}
Margin-left should be set to whatever the width of the first half of the header is. So, if 'Welcome to SH' is 120 pixels wide, then put that as the negative margin left. Essentially, you're pushing the header 50% away from the left side, then moving it back however many pixels using 'margin-left'.
codepen here: http://codepen.io/anon/pen/KwgWQo
I assume you only want to center horizontally.
My solution utilizes flexbox with justify-content: center to align the items centered within the container. The items are the three components of the headline: text before, "the word", text after.
HTML:
<h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span> universitiy</span></h1>
The headline is split into its three parts, the centered word in the second span.
CSS:
/* make the items flex (in a row by default); center the items in the container */
.word-centered {
display: flex;
justify-content: center;
}
/* make the left and right part use all remaining space; padding to space the words */
.word-centered span:nth-child(1), .word-centered span:nth-child(3) {
flex: 1;
margin: 0 5px;
}
/* since the first span uses all space between the middle item and the left edge, align the text right */
.word-centered span:nth-child(1) {
text-align: right;
}
Demo: http://jsbin.com/foduvuvoxa/1
This works in FF 34 and Chrome 39 out of box, requires vendor prefixes for IE 10/11.
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
Is it possible to stack in-line-block elements?
I have a DIV which I want the elements inside it (h1 and P) to be centred. So I set the DIV to text-align centre and initally set the H1 and P tag to inline-blocks.respectively.
The idea was to display the two elements (H1 and P) as in-line-block elements so content is centred and a transparent png shows in the background for the length of the text.
But the problem I have is that having elements as inline-blocks means they will appears next to each other (I don't want this to happen), so I set the P tag as block element but it's resulting in the transparent png being as wide.
HTML:
<div id="hero">
<div class="container">
<div class="row">
<div class="span12" id="hero-text">
<h2>Heading line</h2>
<p>Paragraph line goes here</p>
</div>
</div>
</div>
</div>
CSS
#hero {
height: 435px;
width: 100%;
background: url(../img/hero-image.png) 0 0 no-repeat;
background-color: #999;
position: relative;
color: #FFF;
border-bottom: 3px solid #E6E6E6;
}
#hero-text {
position: absolute;
top: 33%;
text-align: center;
}
#hero h2 {
font-size: 4em;
font-style: normal;
line-height: 50px;
padding-top: 10px;
background: url(../img/bg-heading.png) repeat;
display: inline-block;
padding: 10px 20px;
}
#hero p {
font-size: 2em;
line-height: 30px;
display: block;
background: url(../img/bg-heading.png) repeat;
padding: 10px 20px;
}
Any help is appreciated.
This was actually tougher to solve than I originally thought. I could find two options for you. If you don't want to change your markup:
Give both #hero h2 and #hero p display:inline-block, and give them widths so that their combined width is greater than 100%. They both can be width:51%, or one can be wider than the other, just as long as their total is more than the width of the parent. This will cause the p to break to a new line. See http://codepen.io/anon/pen/cjDiH OR
2.If you want their widths to be fluid, I'd add an element in between the h2 and p that is display:block. I added hr, then took away its margin, padding and border to make it not visible other than to cause the line break. See http://codepen.io/anon/pen/AGDti
I see you figured out out to get them to stack like in your screenshot.
Now,
try adding width: auto; to #hero p in your css.
Here is what I am trying to do: I have a <h1> element, a <time> element, and a <div>, all within a <header> that is the full width of the browser window. The <h1> element needs to be on the left, the <time> element, which changes width with the time, needs to be centered, and the <div> needs to be on the right.
I have been trying to work this out for a while but haven't had any luck. Perhaps it requires some javascript? I also need to be able to (I think using absolute positioning?) vertically center align them all, and they are all different font sizes.
Heres the HTML so far:
<header>
<h1>blahblah.com</h1>
<time>THE TIME</time>
<div id="controls">
DISPLAY CONTROLS
</div>
</header>
and the CSS:
* {
margin: 0px;
padding: 0px;
}
header {
background: black;
color: white;
width: 100%;
font-family: wendy;
}
header h1 {
display: inline-block;
font-size: 40px;
margin-left: 10px;
}
header time {
font-size: 30px;
}
header #controls {
display: inline-block;
}
#controls p {
display: inline-block;
font-size: 20px;
}
Thank you very much!
Time is an inline element, so text-align: center for the header is enough to get the time centered. Further, get rid of those unnecessary inline-block styles.
And then the base aligning style sheet shrinks to this fiddle example:
header {
width: 100%;
overflow: hidden;
text-align: center;
}
header h1 {
float: left;
}
header #controls {
float: right;
}
Overflow is added to assure extending the height of the header to that of the floated elements , whichever is tallest.