Ways to align text on the left within a centered format

It seems like there is something missing here. I am struggling to align text to the left in a centered div.

Below is an example of my final work:

<div class="grid-row">
        <img src="http://www.fununlimitedsports.com/wp-content/images/istockSUP.jpg" />
        <div class="profile-info">
            <div class="name"><a href="#">STUDENT NAME '14</a></div>
            <div class="occupation">Toured nationally with “West Side Story”</div>
            <div class="major">MAJOR: MUSIC THEATRE</div>
        </div>
    </div>

CSS:

.grid-row {
        max-width: 980px;
        margin: 0 auto;
        position: relative;
        border: 1px solid green;
        text-align:center;
    }

How can I center the profile-info div inside the grid-row and still have its content aligned to the left?

Fiddle link

The image used is just a random image from Google

Edit: I want the profile-info div to remain centered in the grid-row but have the text within it align to the left.

htmlcsstext-alignment

Answer №1

By using the CSS property margin: 0 auto;, the text box can be centered horizontally, while setting text-align:left; aligns the text to the left within the box. This approach is effective when the width of the box is limited, such as with width:300px;.

.user-details {    
   border:1px solid gray;
   text-align:left;
   width:300px;
   margin: 0 auto;
}

Answer №2

.grid-row {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border: 1px solid green;
    text-align:center;
}

.profile-info {
    border:1px solid gray;
    margin:0 auto;
    text-align:left;
    width:200px;
}
<div clas="grid-row">
  <div class="profile-info">
    info
  </div>
</div>

Your fiddle has been updated.

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

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

jquerycsstransformcss-transitions

Experience the combined power of addthis, isotope, and nicescroll - all in a single

I am utilizing a WordPress template that includes a set of share buttons from AddThis. <ul class="addthis extra"> <li class="addthis-hold"> <div class="addthis_toolbox" addthis:url="<?php the_permalink( ...

javascriptjquerycssjquery-isotopeaddthis

Resizing the Bootstrap carousel

My website has a custom-sized image that I want to display using Bootstrap's carousel, but I'm struggling with styling the carousel. Here is the result: https://i.sstatic.net/bs9HG.png I'm trying to align the picture in the center. Th ...

htmlcssbootstrap-5

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

htmlcsssass

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Looking for help with extracting user input from HTML and performing mathematical operations in JavaScript. Coming from a Python background, the variable system in JavaScript is confusing to me. Can someone provide guidance on how to achieve this? <div ...

javascripthtmlcssvariablestype-conversion

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

Eliminate unnecessary spaces in the input field located below the provided text

In the html code, I have an input field that looks like this: https://i.sstatic.net/DsD4y.png This is the CSS for the input fields: .form-control-1 { display: block; margin: 0 auto; width: 30%; height: 50px; padding: 6px 12px; font-size: 18p ...

htmlcss

The el-dialog is functioning properly, however, I am looking to add CSS that will animate it to open

I've set up a dialog to open on button click, and it's functioning correctly. My goal is to have the dialog open from the bottom with a height of 300px, show the contents inside it, and then hide when I click outside or inside any element. Here ...

htmlcsselement-ui

The target element is out of reach for the Puppeteer selector

When trying to extract the source of multiple images, I encountered an issue with the selectors not working properly. It seems like the elements are fake or not actually present on the page. Every page contains one of the desired elements (the main image) ...

javascripthtmlweb-scrapingpuppeteerscreen-scraping

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

What's the best way to make two buttons appear side by side on a webpage?

I need to have my two buttons, Update and Cancel, displayed next to each other on the same line. Currently, there is a gap between the two buttons as shown in the attached image. Below is the HTML code I am using: <div class="form_block span2"> ...

htmlcss

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

javascripthtmlangularjs

Vuejs responsive navbar with collapsible sidebar using Bootstrap or Bootstrap-Vue libraries

Vue.js is the framework I'm utilizing for my current project. In creating a dashboard section, I am seeking to implement a responsive design using either bootstrap, bootstrap-vue, or plain HTML and CSS. Below are the images of the desired dashboard -& ...

htmlvue.jsnavbarsidebarbootstrap-vue

Using JavaScript to dynamically add items from a menu and include a delete button for the option to remove them

//I am embarking on an exciting AJAX lab where I will be experimenting with dynamic element creation and deletion. Below is a snippet of the code to get started. //Generate elements and text nodes along with a deletion button for each item in the cart fu ...

javascriptajaxjsonhtml

Nuxt3 - TS2339: The 'replaceAll' property is not found on the 'string | string[]' type in Nuxt3

Hey there! I've been experimenting with the replaceAll() method within my Nuxt3 project and encountered a strange error. Folder Structure ───pages │ └───Work │ │ index.vue │ │ [Work].vue Template <templat ...

htmltypescriptvue.jsnuxtjs3

Ways to create a transparent parallax background

Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...

cssbackgroundprojectparallax

CSS: Achieving Full Container Width Text with Respect to Another Container's Height

Hello, I am facing a very specific issue that I can't seem to resolve: I have two containers (ion-card) and I want them to always be the same height. I was able to achieve this by following the solution provided here: https://i.sstatic.net/he8O7.png ...

cssangularionic-frameworksass

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...

htmlcssbootstrap-5