I'm trying to center these 2 text elements but having trouble. I have no trouble centering both elements just using text-align:center;, but I actually want the sub-heading and heading to both start from the same point. So it should look sort of like this below, where the heading text is directly in the center. I hope I've made myself clear, I can provide a picture if necessary.
I should mention that these divs are responsive, so it would have to apply to any size not just "put left: 50%" or something like that :P
sub-heading
heading text here
<div>
<img class="center-block" src="img/shop-1.jpg">
<span>
<p class="sub-heading">sub-heading</p>
<p class="heading">heading text here</p>
</span>
</div>
CSS:
.shop span {
position: absolute;
top: 30%;
left: 0;
width: 100%;
}
.shop span p {
padding: 0;
}
.shop span .heading {
color: #fafafa;
font-size: 40px;
text-shadow: 0 0 10px #ecd781, 0 0 20px #ecd781, 0 0 40px #ecd781, 0 0 80px #ecd781;
/*text-shadow: 0 0 5px #ecd781;*/
font-weight: 500;
}
Change your .shop span CSS as follows:
.shop span {
position: absolute;
top: 30%;
left: 50%;
transform: translatex(-50%);
white-space: nowrap;
}
This will cause it to be centered based on the largest of the two headings. (If sub-heading is wider than heading, this won't meet your requirement.)
Fiddle
You may wrap text with an extra div with the following styling:
display:inline-block; text-align:left
Demo: http://codepen.io/Nargus/pen/jEgVMb
Wrapper element will be centered by outer text-align:center; rule, but inside it you'll have text-align:left;
It is a much better way than fixed width and margin:auto; for centering
Wrap both inside an <div> and than use following CSS for the <div>
div {
width: 250px; /* Or the maximum of the wides text */
margin: 0 auto;
}
This will position the div into the center, but let the text be left sided. If the width of the <div> is only max width of the wides text, it should fit.
Fiddle: http://jsfiddle.net/xLgxsme7/
edit
If you want to use your <span> than you have to make it display: block;, because you can't change the width of an inline-element.
Have you tried positioning your P classes using relative? It could work.
PS: your img tag isn't closed, insert / before >
Related
I have an issue with overlapping DIVS. Tried a few things but none have provided the desired outcome. I suspect this is quite easy but i'm missing the key element.
Currently the bingo div overlaps the numbers div. On many screens the numbers div is not even visible as the bingo div takes up the entire screen
HTML:
<body>
<div class="numbers" style="height:100%">
<h2>
What sort of number do you want?
</h2>
Evens
Odds
Primes
</div>
<div class="bingo">
</div>
</body>
CSS:
html{
font-size: 100%;
font-family: sans-serif;
}
h2{
margin:2rem;
}
h1{
margin:-2rem 0 2rem 2rem;
font-size: 4rem;
}
a{
margin: 0 0 0 2rem;
border:solid black 1px;
padding: 0.618rem 1rem;
text-decoration: none;
color:black;
}
a:hover{
color: white;
background-color: black;
}
img{
position: absolute;
bottom:0;
}
.bingo{
bottom:0;
margin: 4rem 0 0 0;
width: 100%;
height: auto;
overflow: hidden;
}
Thanks!
The "number" <div> takes the height from the contained elements, texts and <a>; the point is that the <a> elements are inline whose CSS height is just the height of the text lines. If they appear to be rectangular on the screen it's just cause you set a padding (that's not added to the parent <div> height).
That's causing the overlapping of the rectangles on the "bingo ", but for CSS height there is no overlapping.
The solution is that the "number" <div> takes the whole height of the elemets inside it in order to "push down" the "bingo" <div> using:
a {
...
display: inline-block;
margin-bottom: 2rem;
}
I added a bottom margin just to prevent they touch eachother when in a single column at the resize of the screen.
https://jsfiddle.net/hoq97sj5/1/
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.
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.
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
How can I achieve that?
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
To get left/right centering, then applying text-align: center to the div and margin: auto to the p.
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
♣you should do these steps :
the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)
♣♣simply here is the summery of those 5 steps:
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
this is how I do it:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.paragraph {
width: 250px;
background-color: lightyellow;
}
<div class="container">
<p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>
you can add text-align: center; to the paragraph if you want text alignment to be center
You only need to add text-align: center to your <div>
In your case also remove both styles that you added to your <p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
Good Luck
Centered and middled content ?
Do it this way :
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
I fiddled it here
Ha, let me guess .. you want DIVs ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
jsfiddle.net/9Mk64/
on the p element, add 3 styling rules.
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This solution works fine for all major browsers, except IE. So keep that in mind.
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}
<div class="container">
<p class="paragh">Text</p>
</div>
I hope this help.
it's my first question here, while i solved many problems in any area reading other's solutions, but this time i have no luck, i keep trying and googling.
I am working with something i'm not very skilled, CSS. I want to center a box made of an image with a paragraph of text next to it (two rows of text - no more), the text is aligned to the left of the image.
|------------------------------------ NOW ------------------------------------|
|img|BIG TITLE
|img|smaller subtext
|----------------------------- <-- CENTERED----> -----------------------------|
|img|BIG TITLE
|img|smaller subtext
I tried to put everything in a div, but since the width of the DIV depends on the length of the text, and since it changes depending on the page's title, i can't set a fixed width.
Here is my HTML:
<div class="container">
<div class="row">
<div class="header">
<p class="small">
<img class="ok" src="ok.png">
<span class="bigtitle">TITLE</span>
<br><span style="text-align:left">subtext</span></p>
</div>
</div>
and here is my CSS:
.row .header {
width: 100%;
}
img.ok {
top: 15px;
}
p.small {
color: #000000;
font: bold 12px arial,helvetica,sanserif;
display: block;
}
span.bigtitle {
color: #679819;
text-transform:uppercase;
font: bold 42px arial,helvetica,sanserif;
}
text-align: center;
Then i tried:
putting everything in a paragraph and text-align: center;
setting Margin 0px auto to the paragraph;
putting everything in a div and tried centering but i don't know its width
googled and searched for solutions here...
Nothing works, i can't center the block, please help :-)
Thanks in advance
You could float and relatively position the containers like this:
.container {
overflow: hidden;
}
.row {
position: relative;
left: 50%;
float: left;
}
.header {
position: relative;
left: -50%;
float: left;
}
If you have more content in the container div than just this centered bit, you might wrap the centered bit in another div and move the overflow: hidden rule out of .container and to that div instead.