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.
Related
I have a header with a title and subtitle that are both center aligned using flexbox, and have a pale white background behind them. The background should only be as wide as the text itself, which works fine if both the title and subtitle are short enough, but starts breaking down if the subtitle is longer than one line.
.entry-title-wrap {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255,255,255,0.7);
padding: 6px 12px;
margin: auto;
border-radius: 2px;
h1 { font-size: 48px; }
h2 { font-size: 32px; }
}
<header class="entry-header">
<div class="entry-title-wrap">
<h1 class="entry-title">Nick Dourado</h1>
<h2 class="entry-subtitle">If the title is longer than one line so that it breaks over the line it makes the whole box way too big.</h2>
</div>
</header>
As soon as the subtitle is longer than the screen width and breaks onto more than one line, the h2 tag containing it expands to the full width of the container, which pushes the white background out to the edges as well. It also aligns the text to the left of the h2 unless I add text-align: center; event though it should be centered because of the flexbox styling.
How can I keep the white box constrained to the width of the text, and stop the h2 from expanding to the container width? If possible I would also love to force the subtitle to break in the middle of the text rather than one word at a time, so that all the lines are more or less the same length.
Here it is in CodePen. You can see how it should look if you make the subtitle sentence shorter.
This is the old version of the website it's for: http://theartsabstract.ca/post/151891941177/nick-dourado-on-halifaxs-improvised-music-scene
Aligning block elements in center with flex is not the same as using text-align center on headings. So go ahead and add the text-align:center on them.
I also made a few other changes.
removed image underlay
set image as background instead, and set size
to "cover"
added some padding so your white box doesn't hit edge
As far as the text wrapping at middle, I'm not sure of any way to do that besides setting a media query for when the text starts to wrap, and then updating the heading with a max-width in CSS. See CodePen below
http://codepen.io/anon/pen/kkdgjX?editors=1100
Add text-align: center; to .entry-title-wrap h2
http://codepen.io/anon/pen/dpEvbj?editors=1100#0
Not entirely sure what you're asking, but if you're just looking to center the headings, there is no need to use flex at all. Okay, there is a need to use flex for vertical alignment. Added it in. Here's an edited codepen: http://codepen.io/anon/pen/NRVdBQ?editors=1100#0
CSS
.entry-header {
display: flex;
justify-content: center;
height: 340px;
}
.entry-title-wrap {
background-color: rgba(255,255,255,0.7);
padding: 6px 12px;
margin: auto;
border-radius: 2px;
max-width: 20em;
}
h1 { text-align: center;
font-size: 48px; }
h2 { font-size: 32px;
text-align: justify;
text-align-last: center;;
}
div.post-thumb-banner {
display: flex;
align-items: center;
position: absolute;
height: 340px;
width: 100%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
z-index: -10;
}
HTML
<div class="post-thumb-banner">
<img width="4795" height="3460" src="http://media2.fdncms.com/thecoast/imager/u/original/5056558/dsc_5435_1_.jpg" />
</div>
<header class="entry-header">
<div class="entry-title-wrap">
<h1 class="entry-title">Nick Dourado</h1>
<h2 class="entry-subtitle"><i>If the title is a lot longer than it should be it should just wrap properly as this.</i></h2>
</div>
</header>
i want my "body2" div in the center of the page and paragraph float left. but my code apply center align property on both dive.
i have used float left for para in CSS but no solution.
<div class="row body2" align="center">
<div class="writing">
<div class="date">13.01.15</div><br>
<div class="heading">My biggest audio project ever.</div>
<div class="container-fluid">
<div class="para">The complete setup took about 6 hours. We were extremely contended with the result taken into the account of everything is new. A late
</div><br><br>
</div>
</div>
</div>
CSS: i am using text-align:left to make my paragraph left align, but it show center aligned.
.body2
{
background-color: black;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
}
.writing
{
margin-top:64px ;
margin-left: 88px;
padding-bottom: 50px;
}
.date
{
color: #716558;
font-family: myrid Pro;
font-size: 20px;
}
.heading
{
font-family: georgia;
font-size: 36px;
}
.para
{
margin-top: 40px;
line-height: 170%;
text-align:left;
}
if you wanna align div in to the middle of page,
.body2{ width: 500px; margin: 0 auto;}
This will align your div in to the center of your page, change the width depend on your requirement.
to align text to left
.para{text-align:left;}
user this line, it should work good luck
You can done by set the div margin auto .body2{margin:0 auto;text-align:left} and remove align="center" from <div class="row body2" align="center"> that cause your text is center, or set div body2 position absolute .body2{position:absolute; width: 300px; left: 50%; margin-left:-150px} that style will bring your div in the center of the page, hope that will help you
The align property acts as text-align in this case. Instead, you can give your .body2 a non-auto width and apply margin: auto; to center the wrap: JS Fiddle
.body2 {width: 70%; margin: auto;}//can also apply max-width
The complete setup took about 6 hours. We were extremely contended with the result taken into the account of everything is new. A late
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 trying to center text(horizontal and vertical) and I am having a little difficulty with this.
This is what I have tried but is only centering it horizontally, not vertically.
How can I get this text in the center?
<div class="playerDetailsPage">
<p>
<h4>The text will be in the center</h4>
</p>
</div>
css
.playerDetailsPage {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
vertical-align: middle;
line-height: 390px;
}
Don't use tables for this kind of things. It isn't something you can solve by using a table.
For what I can see, it is working perfect. Here is a working example: http://jsfiddle.net/T7V58/1/
Your code is correct, what is the problem? Just remove the p tag and you are there.
<div class="playerDetailsPage">
<h4>The text will be in the center</h4>
</div>
CSS:
.playerDetailsPage {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
vertical-align: middle;
line-height: 390px;
}
Vertical align middle will do nothing on a div (do nothing on a display:block element exactly). vertical aligning works with table cells. The example posted on the comment aligns the h4 becouse the line height is exactly the same as the height of the parent div. But what happens when you have two (or more) lines text? That will break.
The solution:
<div class="parent">
<div class="aligner">
<h4>The text will be in the center which can be several lines long, and will not break the verical centering. Lorem ipsum more text.</h4>
</div>
</div>
.parent {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
}
.parent .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
You should use an internal aligner div and display it as a table cell (so vertcal align will work. You must specify the height and width of the internal element but fortunately inheritane comes to the rescue (so you don't have to redundantly specify it again).
Hope it helps!
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.