cannot centre text in div's and the div's themselves

Forum Moderators: not2easy

Message Too Old, No Replies

cannot centre text in div's and the div's themselves

TheIceman5

6:28 am on Dec 31, 2013 (gmt 0)

I am trying to get some text centered in a set of div's I have evenly spaced across the browser but cant work out how. anyone assist?

[jsfiddle.net...]

also in Chrome and firefox I cannot centre the 4 divs like I can in internet explorer, anyone assist here as well in fixing this?

lucy24

6:46 am on Dec 31, 2013 (gmt 0)

text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;

:: sitting on hands ::

TheIceman5

7:12 am on Dec 31, 2013 (gmt 0)

cool, that has aligned the text but in chrome and firefox still remains the issue of not centering the div's evenly across the page as it expands

birdbrain

9:53 am on Dec 31, 2013 (gmt 0)

Hi there TheIceman5,

try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
.container {
    border:2px dashed #444;
    height:125px;
 }
.box1,.box2,.box3,.box4 {
    float:left;
    width:15%;
    height:100%;
    margin-right:13.33%; 
    text-align:center; 
 }
.box4 {
    margin-right:0;
 }
.box1,.box3 {
    background:#ccc
 }
.box2,.box4 {
    background:#0ff
 }
</style>

</head>
<body>

<div class="container">
 <div class="box1">1 1 1 1 1 1</div>
 <div class="box2">2 2 2 2 2 2</div>
 <div class="box3">3 3 3 3 3 3</div>
 <div class="box4">4 4 4 4 4 4</div>
</div>

</body>
</html>

birdbrain

TheIceman5

12:37 pm on Dec 31, 2013 (gmt 0)

you da man, thanks for that, works perfectly in all 3 browsers.

birdbrain

5:28 pm on Dec 31, 2013 (gmt 0)

No problem, you're very welcome. ;)

birdbrain

lucy24

9:18 pm on Dec 31, 2013 (gmt 0)

cool

Er, I was quoting from the link you posted.