Alignment dilemmas

I'm experimenting with HTML and CSS and have a query concerning the text-align properties.

As I work on constructing my personal website, I aim to align text content to start while having it centered in the middle of the page. Currently, I've managed to center the content, but only when the text-align property is set to center. Is there a way to achieve centered text content with text-align set to start? Ideally, I prefer not to rely heavily on padding as it caused responsive issues in this context, which needed multiple media screen adjustments to resolve.

Apologies for the somewhat elementary question.

HTML

.Container1 {
  height: 100%;
  width: 100%;
  background: #e8eaed;
  background-size: cover;
  display: table;
  margin: auto;
  display: table;
  top: 0;
}

.About {
  font-family: 'Lato';
  font-weight: 300;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  max-width: none;
}

.Content2 {
  margin: 0 auto;
  text-align: center;
}

.About h2 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 10px;
  font-style: italic;
  color: #70a1af;
  text-shadow: 2px 2px white;
  text-align: center;
}

.About p {
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 20px;
  color: #70a1af;
}
<section class="Container1">
  <div class="About">
    <div class="Content2">
      <h2> ABOUT ME.</h2>
      <p> Computer Science // British Born // Wannabe Australian </p>
    </div>
  </div>
</section>

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

This is the desired alignment for the text, centered in the middle of the page...

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

htmlcssflexbox

Answer №1

Consider utilizing Flexbox. Implement align-item:center for vertical alignment of flex items.

Snippet Example

.Container1 {
  height: 400px;
  background: #e8eaed;
  display: flex;
  align-items: center;
}

.About {
  font-family: 'Lato';
  font-weight: 300;
}

.About h2 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 10px;
  font-style: italic;
  color: #70a1af;
  text-shadow: 2px 2px white;
}

.About p {
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 20px;
  color: #70a1af;
}
<section class="Container1">
  <div class="About">
    <div class="Content2">
      <h2> ABOUT ME.</h2>
      <p> Computer Science // British Born // Wannabe Australian </p>
    </div>
  </div>
</section>

Answer №2

Adjusted the width and applied margin: 0 auto

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

Iterating over a column in a table to construct a text string

I'm currently working on a script to iterate through a table column and concatenate the values into a string. Here is what I have written so far: $(".ConvertSQL").click(function () { var values $(".TableQuery tr").each(function () ...

jqueryhtml

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

javascriptcssreactjsmaterial-ui

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascriptjqueryhtmlcss

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

css

What is the best way to remove <a> tags from an XML document?

I'm dealing with <a> tags within an XML file and I need to remove only the <a> tags. For instance: <test>This is a line with <a name="idp173968"></a> tags in it</test> I am unable to use str_replace to replace t ...

phphtmlregexxmlpreg-replace

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

jqueryhtmlajaxtwitterhtml-table

Avoid showing an image when it is outside the div container

Within a single div, I have an assortment of images that are dynamically repositioned using JQuery. $("#"+carElem).css({"left": pos.left+50 +"px"}); I am currently utilizing absolute positioning (although relative positioning yields the same outcome). Is ...

javascriptjquerycss

creating a live updating dropdown menu using Node.js and MySQL

Upon a user clicking and selecting a client, I would like to dynamically update the region dropdown menu with options that are related to that specific client from the databaseenter code here This is my client table: Here is the Region table, where clien ...

javascriptmysqlnode.jsajaxhtml

Click the button to send the form without including any hidden HTML element array value

My main goal is to create a dynamic dropdown menu for users when they click a button. Each click triggers a new dropdown to appear. To achieve this, I have been cloning a hidden div each time the button is clicked. Here's an example of how I am accom ...

javascriptjqueryhtmlarrays

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

Seeking advice on implementing basic validation for a newsletter form that only requires an email address. The current page layout doesn't allow space for jQuery error messages, so I attempted to use the HTML 5 required attribute. However, the form st ...

javascriptjqueryajaxhtmlforms

Is there a way to UPDATE a div without having to RELOAD the entire page in it?

SOLVED -SORT OF--- After much frustration, I finally found a solution to my problem. By adding window.location.reload(); in my code where the submit button is, I was able to close the div successfully. // Collapse Panel on submit $("div#panel").on(' ...

phpjqueryhtmlrefresh

Adapt the CSS based on different screen sizes

I am currently developing a mobile application using angularjs and the ionic framework. My application is intended for both tablet and mobile versions. I have encountered an issue where I cannot use the same CSS for both the tablet and mobile versions. Is ...

jqueryhtmlcssangularjsionic-framework

Leveraging multiple ">" CSS selectors

Here is the HTML code to style: <table id="my-table"> <tr> <td> I would like to customize this </td> <td> <table> <tr> <td> Not looking to customize t ...

htmlcss

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

"Troubleshooting: Why Won't My Entire Div Display on the

Struggling with a website rebuild due to my limited knowledge of HTML/CSS. For some reason, this whole div section isn't showing up as it should. Here is the problematic div: <div class="container clearfix"> <div class="border-shade sli ...

htmlcss

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

htmlcsscakephp