Vertical alignment of text within a center位置

Question

Vertical alignment of text within a center位置

My current project involves creating a website layout similar to this:

https://i.sstatic.net/5i1BK.png

I am facing difficulty in centering the text within the box like this:

https://i.sstatic.net/lCaFQ.png

This is my progress so far:

@font-face {
    font-family: 'Trend Sans 004'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}

... more CSS code here ...

<!DOCTYPE html> 

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

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Cupid's Cafe & Bakery</title>
 
   ... more HTML code here ...
  
  </head>
<body>

 ... more HTML code here ...

  <hr width="100%">
  
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

I am aiming to ensure that the text is perfectly centered within the box. Also, I want to maintain consistent spacing between the header, paragraphs, and HR even when resizing the window.

html css skeleton-css-boilerplate

Answer 1

Answer №1

Here is my suggestion:

1) Enclose your aa within two containers :

<div id="aa-outer-container">
  <div id="aa-inner-container>
    <div id="aa">
      <h5>The Bakery</h5></br>
      <p>Looking for a cozy spot to enjoy a good book or get some work done? The Bakery is the perfect hideaway offering delicious lunch options and expertly brewed beverages.</p>
      <hr align="left" >
    </div>
  </div>
</div>

2) Include the following CSS :

#boxRowTxt {
    position : relative;
}

#aa-outer-container {
    width: 100%;
    height: 100%;
    position : absolute;
    display: table;
}

#aa-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#aa {
    text-align: left;
    display: inline-block;
}

#aa h5 {
    margin-bottom: 1rem;
}

#aa p {
    margin-bottom: 1.5rem;
}

This solution should resolve your issue!

For a demonstration, check out this Fiddle too!

Answer 2

Here is my suggestion:

1) Enclose your aa within two containers :

<div id="aa-outer-container">
  <div id="aa-inner-container>
    <div id="aa">
      <h5>The Bakery</h5></br>
      <p>Looking for a cozy spot to enjoy a good book or get some work done? The Bakery is the perfect hideaway offering delicious lunch options and expertly brewed beverages.</p>
      <hr align="left" >
    </div>
  </div>
</div>

2) Include the following CSS :

#boxRowTxt {
    position : relative;
}

#aa-outer-container {
    width: 100%;
    height: 100%;
    position : absolute;
    display: table;
}

#aa-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#aa {
    text-align: left;
    display: inline-block;
}

#aa h5 {
    margin-bottom: 1rem;
}

#aa p {
    margin-bottom: 1.5rem;
}

This solution should resolve your issue!

For a demonstration, check out this Fiddle too!

Answer 3

Answer №2

Check out this helpful solution: here

@font-face {
    font-family: 'Trend Sans 004'; /*to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*Font URL*/
}


@font-face {
    font-family: 'Utopia Regular'; /*to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*Font URL*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*Font URL*/
} 

/* Skeleton V2.0.4
* © 2014, Dave Gamache 
*/ 
 
/* Grid */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; 
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

@media (min-width: 400px) {
  .container { width: 85%; padding: 0; }
}

@media (min-width: 550px) {
  .container { width: 80%; }
  .column,
  .columns { margin-left: 4%; }
  .column:first-child,
  .columns:first-child { margin-left: 0; }
  /* Styles for various column widths and offsets... */
}

/* Base Styles */
html { font-size: 62.5%; }
body { background-color:#C8D7DC; }
/* Typography styles - h1 to h6, paragraphs */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
p { margin-top: 0; }

/* Buttons & Forms styling */
.button,
button,
input[type="submit"],
...
  
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Unique Title Here</title>
  <meta name="description" content="Brief Description">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  

  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body>

  <div class="container">
  
  <div class="row">
  <div class="twelve columns" id="header">
  Page Header
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="content">
  Main Content Goes Here
  </div>
  </div>
  
  
  <div class="row" id="footer"><div class="twelve columns">Footer Section</div></div>
  
  </div>


</body>
</html>

Answer 4

Check out this helpful solution: here

@font-face {
    font-family: 'Trend Sans 004'; /*to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*Font URL*/
}


@font-face {
    font-family: 'Utopia Regular'; /*to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*Font URL*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*Font URL*/
} 

/* Skeleton V2.0.4
* © 2014, Dave Gamache 
*/ 
 
/* Grid */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; 
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

@media (min-width: 400px) {
  .container { width: 85%; padding: 0; }
}

@media (min-width: 550px) {
  .container { width: 80%; }
  .column,
  .columns { margin-left: 4%; }
  .column:first-child,
  .columns:first-child { margin-left: 0; }
  /* Styles for various column widths and offsets... */
}

/* Base Styles */
html { font-size: 62.5%; }
body { background-color:#C8D7DC; }
/* Typography styles - h1 to h6, paragraphs */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
p { margin-top: 0; }

/* Buttons & Forms styling */
.button,
button,
input[type="submit"],
...
  
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Unique Title Here</title>
  <meta name="description" content="Brief Description">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  

  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body>

  <div class="container">
  
  <div class="row">
  <div class="twelve columns" id="header">
  Page Header
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="content">
  Main Content Goes Here
  </div>
  </div>
  
  
  <div class="row" id="footer"><div class="twelve columns">Footer Section</div></div>
  
  </div>


</body>
</html>

Answer 5

Answer №3

If you're looking to increase the space in your #boxRowTxt, one option is to use padding-top and padding-bottom. I have made some adjustments for you by commenting out a few lines and adding new ones. Make sure to set both values to the same number to maintain the center alignment of the content.

#boxRowTxt {
font-family:'Utopia Regular';
box-shadow:0px 0px 0px 3px #806239 inset;
width: 48%;
color:#163764;
position:static;
/*height: 0;*/
/*padding-bottom: 48%;*/
    /*Keep the padding on top and bottom the same*/
    padding-bottom: 4%;
    padding-top: 4%;

font-size:1.7vw;   
}

Answer 6

If you're looking to increase the space in your #boxRowTxt, one option is to use padding-top and padding-bottom. I have made some adjustments for you by commenting out a few lines and adding new ones. Make sure to set both values to the same number to maintain the center alignment of the content.

#boxRowTxt {
font-family:'Utopia Regular';
box-shadow:0px 0px 0px 3px #806239 inset;
width: 48%;
color:#163764;
position:static;
/*height: 0;*/
/*padding-bottom: 48%;*/
    /*Keep the padding on top and bottom the same*/
    padding-bottom: 4%;
    padding-top: 4%;

font-size:1.7vw;   
}

Answer 7

Answer №4

If you need to cater to different browsers, using flexbox is a fantastic solution!

<div id="aa">
  <h5>The Cafe</h5>
  <p>Escape to our cozy cafe which offers a peaceful environment to unwind, work, or simply enjoy a good book. Don't forget to sample our mouthwatering lunch items and expertly crafted hot beverages.</p>
  <hr align="left">
</div>

Include the following in the #aa CSS rule (consider changing it to a class)

#aa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

Answer 8

If you need to cater to different browsers, using flexbox is a fantastic solution!

<div id="aa">
  <h5>The Cafe</h5>
  <p>Escape to our cozy cafe which offers a peaceful environment to unwind, work, or simply enjoy a good book. Don't forget to sample our mouthwatering lunch items and expertly crafted hot beverages.</p>
  <hr align="left">
</div>

Include the following in the #aa CSS rule (consider changing it to a class)

#aa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

Answer 9

Answer №5

To center the text in the #aa div, simply add text-align:center; to it. If you only want to apply this style to one of the #aa boxes instead of both, consider wrapping another div around the specific box you want to target and applying the style there.

@font-face {
    font-family: 'Trend Sans 004'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}


@font-face {
    font-family: 'Utopia Regular'; /*a name to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*URL to font*/
}


/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
    }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
...

...
<body>

<!-- Primary Page Layout
...

</body>
</html>

Answer 10

To center the text in the #aa div, simply add text-align:center; to it. If you only want to apply this style to one of the #aa boxes instead of both, consider wrapping another div around the specific box you want to target and applying the style there.

@font-face {
    font-family: 'Trend Sans 004'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}


@font-face {
    font-family: 'Utopia Regular'; /*a name to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*URL to font*/
}


/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
    }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
...

...
<body>

<!-- Primary Page Layout
...

</body>
</html>

Vertical alignment of text within a center位置

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to showcase information in Angular?

Using jQuery.post to select and manipulate the target div displaying Google search results

Can implementing $routeProvider help reduce data usage on a network?

HTML and CSS styled accordion with nested checkboxes: handling long items

Changing direction of arrow upon dropdown menu opening with JavaScript

Creating a centered and beautifully styled picture with a specific maximum size using React

How can I design a tooltip window using HTML, jQuery, or other elements to create a box-like effect?

AngularJS navigates to specific URL paths instead of only displaying the corresponding HTML pages

Tips for preventing menu flickering caused by overflow during CSS animations

I am looking to update a WordPress site every 10 seconds to keep it current

Positioning the tiny rectangle containing the information icon within the larger horizontal rectangle

Adjust the carousel width on slide in Bootstrap 4

Troubleshooting: Select2 Search Functionality Error

Set the color of the text in the Material UI pagination component to a subtle shade

Shrink video size directly in the browser using JavaScript and HTML5 before storing or sharing it

Show an HTML email message on a webpage without disrupting the existing page layout

What is the most effective method for displaying two external web pages next to each other?

You may only insert a single image into a container

Unraveling XML with XSLT 2.0 to Remove Normalization

Content overlapped by Bootstrap footer