How to align several lines of text in a table cell

I've been trying to center multiple lines of text in a table cell using the table method, but no matter how many online guides and SO posts I follow, I just can't seem to get it right.

What I'm aiming for is to have the text perfectly centered within the grey area of the div's background (as shown in the image below). As I resize the browser, I also want the text to expand and fill the entire width of the div, though that's a problem for another day. For now, could someone please review my CSS code (or maybe even the HTML setup) and let me know why the text isn't centering properly?

HTML

<div id = "about">
    <div id = "header">
        <h3>About.</h3>
        <div id = "about-background">
            <div id = "about-text" class="left-grid">
                <p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
            </div>
        </div>
    </div>
</div>

CSS

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
    height: 525px;
    background: linear-gradient(90deg, #bbc6cb 50%, #ffffff 50%);
}

#about-text {
    font-family: Quicksand;
    font-size: 22px;
    line-height: 35px;
    font-weight: 300;
    width: 45%;
    display: table;
}

#about-text p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Answer №1

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
    height: 525px;
    background: lightgrey;
    display: table;
}

#about-text {
    font-family: Quicksand;
    font-size: 18px;
    line-height: 35px;
    font-weight: 300;
    width: 45%;
    margin: 0 auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
<div id = "about">
    <div id = "header">
        <h3>About Us</h3>
        <div id = "about-background">
            <div id = "about-text">
                <p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. </p>
            </div>
        </div>
    </div>
</div>

Answer №2

Your text is currently being displayed at only 45% of the page due to the width property in #about-text. Removing that and increasing your background length to 100% will center the text properly.

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
  margin: auto;
      background: linear-gradient(90deg, #bbc6cb 100%, #ffffff 100%);
}


#about-text {
    font-family: Quicksand;
    font-size: 22px;
    line-height: 35px;
    font-weight: 300;
    display: table;

}

#about-text p {
display: table-cell;
text-align: center;


}
<div id = "about">
    <div id = "header">
        <h3>About.</h3>
        <div id = "about-background">
            <div id = "about-text" class="left-grid">
                <p >Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

pass the HTML output back to Python

I am currently working on a local website using Python to create a button that will open the door to my room from my phone through a Raspberry Pi. I have already created a Python program that successfully opens the door, but now I am trying to implement an ...

Execute a PHP script upon button click without the need to refresh the page

I'm facing an issue with integrating PHP and JavaScript. Objective: To execute a .php script when the event listener of the HTML button in the .js file is triggered without causing the page to reload. Expected outcome: On clicking the button, the PH ...

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

Is full support for CSS 3D transforms (preserve-3d) provided by IE11?

Creating a web app utilizing css 3d transforms, my goal is to have IE11 support if feasible. I am aware that IE10 does not endorse the preserve-3d value for the transform-style css attribute, however, there seems to be conflicting information regarding I ...

Dynamically loading pages into a div with the power of AngularJS

I am attempting to dynamically load pages into a div using a select Here is my HTML code : <div ng-app="App" ng-controller="ProjectCtrl"> <div> <select ng-model="selectedType" class="form-control" ng-change="showContent()" ng-opt ...

Retrieve base64 encoded data from several content attributes

Is there a way to optimize the use of base64 data in CSS by defining it once and referencing it in multiple content properties? div#my_id1 { content: url(data:image/png;base64,...); } div#my_id2 { content: url(data:image/png;base64,...); } Using ...

The color of the sidebar navigation elements remains consistent

Here is the HTML code snippet that I am currently working with: <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar" data-ng-controller="NavbarController"> <li class="nav-item" ...

Share an image using only the publish_actions authorization

There are some apps I've come across that only request access to users_photos and publish_actions (not publish_stream or photo_upload). Surprisingly, they are able to upload photos without being approved for User Generated Photos (e.g. Instagram). Wh ...

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Fi ...

The GridCalendar view of FullCalendar v6.1 is generating 50 `ARIA attribute unsupported or prohibited` errors when analyzed with the SiteImprove browser extension

The Challenges Creating a website that adheres to accessibility laws can be quite daunting. I am currently using SiteImprove, a free browser extension, to check for any issues on my site. Unfortunately, the GridCalendar view is showing 50 errors. ARIA a ...

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

Leveraging configuration files for HTML pages without any server-side code

I am currently working on developing an app using phonegap. At the moment, I have the reference to a script in every page like this: <script language="javascript" src="http://someServer/js/myscript.js"></script> If the server 'someServer ...

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

Ajax handling all tasks except for adding HTML elements

Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here. $(wi ...

Is there a way to turn off the ripple effect on Material UI Input components?

Is there a way to turn off the ripple effect or highlight color on the TextField component in React's Material UI? https://i.sstatic.net/qB2cm.png I've attempted to modify the theme: theme.props.MuiTab.disableRipple = true theme.props.MuiButto ...

Combination of written content and mathematical equations displayed on an HTML webpage

I've been tasked with creating something similar to the following on an HTML page: The math tag in HTML is not suitable because it struggles with handling the line break between parts "/begin()-/end()". To achieve the desired effect (succes ...

Guide on using an image as a background in a <svg> element with React.js

I am facing an issue with filling an SVG path with a background image. I have tried various methods found on Google, but none seem to work as expected. Here is the code snippet I have been working with: <div className="intro"> ...

Managing mouse click events in jQuery

Here on SO, I successfully implemented the mouse down handler. Now, my goal is to separate these functions into their own file named test.js. Within test.js, the code looks like this: function handleMouseDown(e) { console.log('handleMouseDown&ap ...