Best way to center text

HTML & CSS
1

I am working on a page that displays a subscription offer.

The copy is something like this…

All of this will be wrapped in a box with a border that is maybe 30% width of the entire screen.

I have my box pretty much done, but am wondering the best way to tackle positioning the text and marking it up? :wonky:

The “$1” should be much larger font and center within the box.

The text below that should be centered in the box, but left aligned. I was going to rely on padding for that.

The button would need to be centered.

And the bullet points left aligned.

I guess my main question is how to style the “$1” part…

2

Would just styling a

tag be the way to go?

3

Hi UpstateLeafPeeper,

here is an example, that may help to get you started…

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    font-size:1.25em;
    color: #555;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
 }

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
 }

.subscription {
    width: 31.33%;
    padding: 1em;
    margin: 1%;
    border: 1px solid #999;
    border-radius: 0.75em;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 ), 
         0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    box-sizing: border-box;
    background-color: #fff;
 }

.subscription span {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
 }

#container .subscription:nth-of-type(2) {
    background-color: #eef;
 }

#container .subscription:nth-of-type(3) {
    background-color: #fee;
 }

.subscription span:last-of-type {
    margin-left: 2em;
    font-size: 1em;
    text-align: left;
 }

.subscription p {
    margin-left: 2em;
 }

@media ( max-width: 52em ) {
.subscription {
    width: 48%;
  }
 }

@media ( max-width: 34em ) {
.subscription {
    width: 98%;
  }
 }
</style>

</head>
<body> 

<h1>page description</h1>

<div id="container">
 <div class="subscription">
  <span>$1</span>
  <p>
   for one-month trial of<br>
   Basic Digital access<br>
  (Regular price is $30/year)
  </p>
  <span>&lt; &lt; GetOffer &gt; &gt;</span>
  <ul>
   <li>Feature 1</li>
   <li>Feature 2</li>
   <li>Feature 3</li>
   <li>Feature 4</li>
  </ul>
 </div>

 <div class="subscription">
  <span>$5</span>
  <span>&lt; &lt; GetOffer &gt; &gt;</span>
 </div>
 <div class="subscription">
  <span>$10</span>
  <span>&lt; &lt; GetOffer &gt; &gt;</span>
 </div>

<!-- #container --></div>

</body>
</html>

coothead

4

You never cease to amaze me, @coothead

Thanks for the hints!!

5

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