Centered responsive text

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/kw83kLmo/

It’s justs a block of text that I need to center in the window.

The text needs a set width because I don’t want it to be the full width of the container.

When the window gets smaller the text needs to stay in the center but get narrower.

In the example here it stays centered and responds until it get’s to 600px then just stays that width.

I know I have set that width but I did that to center it

2

Couldn’t you just margin:0 auto (without position:absolute) to keep the heading centered? If you need it at the bottom of the container, it could just come last in the source code for that .container-fluid element.

3

Use left and right at the same time with margin:auto and the max-width element will center and then shrink as required.

e.g.


.hero_heading h1{
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 0; bottom: 0; right: 0;
   margin:auto;
    max-width: 600px;
}
4

Paul O’B

Thanks that works in Mac browsers but in ie the text isn’t centered.

I have a jsfiddle here - http://jsfiddle.net/3ffjn3sm/1/

5

Hi,

Sorry I forgot about the IE bug with max-width on absolute elements. You will need a slightly different approach to cater for IE.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.hero {
	background: blue;
	height: 300px;
	position: relative;
}
.hero_heading {
	position: absolute;
	left: 0;
	top: 20px;
	right: 0;
	text-align:center;
}
h1 {
	color: white;
	line-height: 1.3em;
	display:inline-block;
	max-width:600px;
}
.glyphicon-play {
	background: red;
	border-radius: 5px;
	color: white;
	font-size: 3em;
	margin: 30px 0 0 0;
	padding: 10px;
}
</style>
</head>

<body>
<div class="hero">
		<div class="hero_heading text-center">
				<h1>This is the hero heading This is the hero heading</h1>
				<div><span class="glyphicon glyphicon-play text-center" data-toggle="modal" data-target="#myModal"></span> </div>
		</div>
</div>
</body>
</html>
6

Hi Paul O’B

Thanks for the help.

The text is now centred but the play button floats next to the right of the text when the window is wider.

7

OK, got it working

Is this the best way?

8

If you look at my html that was what I gave you :slight_smile:

Where possible you should avoid running block elements into inline elements anyway and:

<h1>Hello</h1>
<span>Fred</span>

…is not the best semantic structure and should be:

<h1>Hello</h1>
<p><span>Fred</span></p>

Although both are valid unless the inline element is a direct child of the body.

9

Sorry I should have read your answers properly, thanks again.