Tips for aligning a specific section of text in the center

Currently in the process of learning bootstrap for website design, I am working on creating a user profile page. The layout includes fields such as name and email with corresponding values displayed inline when screen size permits. My goal is to align the field to the left and the value to the center using bootstrap classes and css if necessary. Below is the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
...
</body>
</html>

I aim to position the "Email" (within the <strong> tag) at the left within the parent element "profile-info" while centering the span (with class "value") within that same parent.

htmlcssresponsive-designbootstrap-5

Answer №1

Center the entire parent element using text-align: center, and then absolutely position the value class by setting position: absolute with left: 0 and right: 0. Also, float the strong element to the left side. The CSS code should look like this:

.text-start p {
  text-align: center
}

.text-start strong {
  float: left;
}

.value {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/2e9370a952.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popperjs/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <title>Profile</title>
  <style>
    body {
      background: linear-gradient(to right, #7A96E9, #BFAEE0);
      text-align: center;
    }

    .profile-info {
      background: white;
      border-radius: 4px;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>

<body>
  <div class="container d-flex flex-column justify-content-center" style="height: 100vh">
    <div class="row">
      <div class="col-lg-7 col-md-8 col-sm-10 mx-auto">
        <div class="profile-info p-4">
          <h1 class="mb-4">Profile</h1>
          <div class="text-start">
            <p><strong>Email</strong><span class="value"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3f223b372a363f1a3f223b372a363f74393537">[email protected]</a></span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

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

I'm having trouble understanding why I'm getting an error when trying to link CSS or SCSS

<link rel="stylesheet" type="text/css" href="scss/styles.scss"> <link rel="stylesheet" type="text/css" href="css/styles.css"> /*webpackconfig.js*/ var path = require("pat ...

javascripthtmlcssnode.jswebpack

Is it possible to center my tab on the page and add captions as well?

Struggling to align a tab with 3 image buttons in the middle, I resorted to using manual margin adjustments. I also added captions separately from the buttons for aesthetic purposes, but know this is not the correct way. Is there a way to attach the captio ...

htmlcssalignmentbootstrap-4

What is the best way to modify the date format from the input field of type date in a reactjs application?

In my ReactJS project, I am using the input type date and it is functioning properly. However, I have a requirement to change the date format from dd/mm/yyyy to yyyy-mm-dd. I have attempted to make this change but have not found a solution yet. Here is my ...

htmlreactjsdatedatetimeinput

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Hello there, I've been working on a project where I need to create a responsive grid of cards, like news articles, that maintain their proportions even when the browser's width changes. To achieve this, I decided to use an aspect-ratio hack by s ...

htmlcss

A significant decrease in speed is noticeable when Raphael JS is utilized with a large number of rectangles with backgrounds

I am faced with a challenge involving a large collection of small rectangles (4K-5K) and I am looking to implement the sprite technique in order to assign them a background using just one image to avoid overwhelming the server with requests. When I opt fo ...

javascriptcssperformancesvgraphael

Guide to applying conditional styling to Material-UI TextField

After creating a custom MUI TextField, I implemented the following styling: const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#00 ...

cssnode.jsreactjsmaterial-ui

What is the best way to show real-time values using chart js?

Just recently, I've delved into the world of web development and am eager to learn how to integrate chart js for real-time value display. Could anyone offer advice or guide me through the process? var data = []; var temp = []; async f ...

javascripthtmlnode.jsejs

Full height container with content that can be scrolled (Tailwind)

I am designing a webpage that requires two containers stacked on top of each other with some space in between. The bottom container should occupy the remaining screen space accurately, neither more nor less. Inside this lower container, there will be fixed ...

htmlcssvue.jstailwind-css

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

Button, anchor not aligned horizontally due to differing padding

I've been pondering this question for quite some time now. Whenever I try to style a button in HTML using the a tag or button tag with equal padding on the top and bottom, the buttons still align horizontally. Please refer to the image below for clari ...

htmlcss

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary. Is there a way to combine the browse and upload functions into just one button? ...

phpjavascripthtmlfileupload

Four images are loaded sequentially in a single scroll in the sequencer

I am facing an issue with this plugin's jQuery code. Currently, the code allows only one image to move in one scroll. However, I need to make four images move one by one in a single scroll sequence. Additionally, I would like to set a specific time in ...

javascriptjqueryhtmlcssjquery-animate

Is there a way to prevent javascript from automatically inserting tags when selecting text?

If you want to view the Fiddle Here Essentially, it's a text-highlighting tool that works almost flawlessly. The problem arises when it encounters tags like <p> or <br> within the selection. The JavaScript code seems to automatically in ...

javascriptjqueryhtml

What is the process for styling cells with Bootstrap?

I'm working on a Flask app where users input data that gets processed into a table of values. My goal is to show this table to the user with color-coded cells based on certain criteria determined during the generation process. Is it possible to achie ...

htmltwitter-bootstrapbootstrap-4

Is it possible to gradually decrease the blur of an image in JavaScript using a loop and a variable?

I'm experimenting with something like this: let str = 10; let blu = "px"; let val = ""; function check() { if(a < b){ str = str - 6; if (str<0){str = 0} val = str+blu; document.getElementById("img1&q ...

javascripthtmlcssimageblur

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

Position links at the top right and top left corners of an image

I am trying to position two links over an image inside a div. The links should be placed on the top-left and top-right corners of the image. I have attempted the following code: <div class="container"> <div style="float:left"><a href="#"& ...

htmlcss

Using PHP to create a dynamic gallery that changes styles when hovering with CSS

One of my past projects involved creating an image gallery with CSS that had some unique features: I created a thumbnail gallery I placed 1x1 pixel images in a div On mouseover of the thumbnails, the 1x1 pixel images expanded to fit the div size, with th ...

phpcssimagegallery

Excessive Header Length Exceeding Page Limit

I've been struggling to pinpoint the reason why my page is displaying with a longer header than the actual page length. Even after adjusting the header size to be less than 100%, there is still excess white space overflowing beyond the edge of the pag ...

htmlcss