What am I doing wrong here that the text isn't in the middle of the page?

I’m using outer and tcell, that should center the text in the middle of the page and it’s not.

Code

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

p {
  font-style: normal;
  font-size: 6vw;
  font-family: georgia;
  margin-top: 0;
  margin-bottom: 0;
}

.hr3 {
  color: #333344;
}

.hr4 {
  color: #995588;
}

.hr5 {
  color: #99bbdd;
}

.hr6 {
  color: #5599cc;
}

.hr7 {
  color: #dd99aa;
}


<div class='outer'>
  <div class='tcell'>

    <p>
      <span class='hr3'>text</span><span class='hr4'>text</span><span class='hr5'>text</span><span class='hr6'>text</span><span class='hr7'>text</span>
    </p>


  </div>
</div>

I don’t see any css rules applied to .tcell`.

.tcell {
  display: table-cell;
  vertical-align: middle;
}
2 Likes

I see class=“tcell” in the HTML, but do not see .tcell {} described in the CSS.

for your comparison:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tcell</title>
<!--
https://www.sitepoint.com/community/t/what-am-i-doing-wrong-here-that-the-text-isnt-in-the-middle-of-the-page/275514
-->
    <style>
html,
body {
  width:100%;
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display:table;
  height:100%;
  width:100%;
}
.tcell {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
p {
  font-style: normal;
  font-size: 6vw;
  font-family: georgia;
  margin-top: 0;
  margin-bottom: 0;
}

.hr3 {
  color: #333344;
}

.hr4 {
  color: #995588;
}

.hr5 {
  color: #99bbdd;
}

.hr6 {
  color: #5599cc;
}

.hr7 {
  color: #dd99aa;
}
    </style>
</head>
<body>

<div class='outer'>
    <div class='tcell'>
        <p>
            <span class='hr3'>text</span><span class='hr4'>text</span><span class='hr5'>text</span><span class='hr6'>text</span><span class='hr7'>text</span>
        </p>
    </div>
</div>

</body>
</html>

ninja’d by SamA74 :wink:

1 Like

I forget this. Thanks.

.tcell {
display:table-cell;
vertical-align:middle;
text-align:center;
}

My other question was going to be, if I wanted to turn the text into a link, how would I do that? Being that it’s multiple colors.

CSS can make text look like a link, but it can’t change text to a link.

For that you’ll need to code actual links into the HTML or change them into links using script.

All of the spans are within the <a href="#"></a> tags:

        <p>
            <a href="#"><span class='hr3'>text</span><span class='hr4'>text</span><span class='hr5'>text</span><span class='hr6'>text</span><span class='hr7'>text</span></a>
        </p>

Is that what you mean?

1 Like

multi color link code saved. Got it. yes.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.