Help! My HTML/CSS (Bootstrap) text won't center properly. Can anyone assist me?

My text doesn't seem to be centered on the page, despite using the "text-center" class for the caption text. What am I missing here?

<div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div style= "width: 50%"; class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularizing the pink ribbon associated with breast cancer awareness." </h7>
</div>
htmlcssbootstrap-4

Answer №1

To achieve a div that is 50% width and centered, you can either eliminate the width attribute...

<div class="text-center font-italic">

or include margin-left with a value of 25% in addition to the 50% width...

<div style= "width: 50%; margin-left:25%;" class="text-center font-italic">

Check out this Codepen demo for reference: https://codepen.io/anon/pen/zpWOod

Answer №2

The alignment is set to center only at the moment. However, the assigned width is only 50%. To fix this issue, simply remove the width:50% from your code and it should work properly.

<div class="text-center font-italic">
   <h7> "Evelyn Lauder was a prominent Austrian-American entrepreneur known for popularizing the pink ribbon associated with breast cancer awareness." </h7>
</div>

Answer №3

Eliminate the width set to 50%.

<div data-role="page">
  <div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

Answer №4

Here's another method you can try out. I made sure to align both divs in the center and got rid of the width property.

<div align="center">
  <h1>Evelyn Lauder </h1>
  <h5><i> 1936-2011</i></h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div align="center">
  <h6><i> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </i></h6>
</div>

I hope you find this tip useful!

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

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud

When trying to access my iCloud account settings and locate the "Find my iPhone" button on iCloud.com, I am encountering issues with my selectors. It seems like there are no frames on the page, but the Xpaths I'm using are not matching. Here are the ...

javacssseleniumxpathautomation

Next.js: Out of the 3 card flips, only 1 experiences a malfunction

Gratitude to the community for always coming through with assistance. Your generosity and support are truly invaluable. As a first-time poster, I may overlook some details, so please bear with me. Embarking on my initial real project as a self-taught amat ...

csstransformjsxtransitionnext.js

Is it possible to add data in MongoDB without specifying a field name?

I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...

javascripthtmlmongodbreactjsmeteor

Concealing and Revealing a Div Element in HTML

Every time the page is refreshed, I am encountering a strange issue where I need to double click a button in order to hide a block. Below is the code snippet for reference: <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

javascripthtmlcss

Adjust the height of images to be consistent

I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that wo ...

javascripthtmlcssfrontendtailwind-css

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

Using PHP to send a JSON request via cURL

I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...

phphtmljsoncurlheader

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to incorporate a feature similar to the "Get help" button on this website: The button, located in the lower right corner, opens a sticky chat menu. I am interested in adding dynamic information to the button (such as the number of tasks a u ...

cssangular

How to set a default class for Bootstrap tabs using AngularJS

I'm working with an angular tabbable element and I need to set a default tab as well as add a specific class to one of the tabs. For example, I want tab 2 to be selected by default and give tab 1 a specific class. Here is the link to the code: http:/ ...

htmlclassangularjsangular-ui

What could be causing the reliability issue with this particular Angular JS code for dropdown menus?

Attempting to create a dynamic country-city dropdown menu using AngularJS <div> Country: </br> <select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country) ...

javascripthtmlangularjsjson

Struggling to Collaborate with External PHP File Leads to Garbled Results

Recently started learning PHP and I'm pretty sure I have it set up correctly with my local IIS as I was able to use it in a form on another local website. For this particular project, I have a basic HTML file structured like this: <!doctype html&g ...

phphtml

Difficulty with Line Breaks in Spans

I've noticed that my multi-line address in the footer is not breaking correctly at certain screen widths. Each line of the address is enclosed within a <span> tag with a specific class and then styled either as block or inline-block in the CSS ...

htmlcss

Concealed Content Within Drawer Navigation

When using the Material UI permanent drawer component in different pages, I encountered an issue where the main content was getting hidden behind the drawer's toolbar and sidebar. I am unsure how to fix this problem. It seems like a styling issue, bu ...

javascriptcssreactjstypescriptmaterial-ui

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

cssbootstrap-4

Ways to update a component's state by clicking a button located on a different component

Seeking help with changing a parent state value when clicking a button. Although there are numerous similar queries out there, I'm really struggling to grasp the concept. I've attempted lifting the state up but haven't quite nailed it yet. ...

javascripthtmlreactjs

Emphasize a passage by clicking on a different section of text

Seeking Assistance I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a new ...

javascriptjqueryhtmlcss

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

javascriptjqueryhtmltwitter-bootstrap

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Currently, I am working on a website using AngularJs Material sidenav. My goal is to make both md-sidenav and md-content appear as one page, without any scroll bars showing up when the height of one element exceeds that of the other. How can I achieve th ...

cssangularjsangularjs-material

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

What is the technique for linking to a different WordPress PHP file using a href?

I have a question regarding working with WordPress. I am using Stacks, a blank theme to convert an HTML template to WordPress. I need to create a hyperlink or button on a landing page that redirects to another PHP file within my website directory (e.g., lo ...

phphtmlcsswordpresswordpress-theming