What are the steps to properly centralize a "brief biography"?

I've been struggling to align my short bio on my webpage. I used Bootstrap to create a column layout with a picture and text, but I can't seem to center it properly.

Various attempts were made, including using float: left and float: right, as well as display: block; margin: 0 auto;. However, none of these methods worked for me.

I believe the key is to create a single element that contains both the image and text side by side, and then centering it. Unfortunately, I have not been successful in achieving this.

If anyone could provide guidance on how to achieve the desired effect, I would greatly appreciate it.

Edit: Here's an example of what I'm trying to accomplish: https://i.sstatic.net/ip15p.png

This is what I currently have:

.profile-pic {
  border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-xs-9">
      <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853">
    </div>
    <div class="col-md-10 col-xs-auto">
      <h1>Telmo "Trooper"</h1>
      <h4><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0672636a6b69287274696976637446616b676f6a2865696b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c283930313372282e33332c392e1c3b313d3530723f3331">[email protected]</a></a></h4>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

I created a CSS class called mycenter and applied flexbox properties to it. This class is then added to the row. Please keep in mind that the use of flexbox properties may cause compatibility issues with older browsers. You can find more information here.

.profile-pic {
  border-radius: 50%;
}

.mycenter {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
<div class="container-fluid">
  <div class="row mycenter">
    <div class="col-md-2 col-xs-9">
      <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853" width="200">
    </div>
    <div class="col-md-10 col-xs-auto">
      <h1>Telmo "Trooper"</h1>
      <h4><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1b0a030200411b1d00001f0a1d2f08020e0603410c0002">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6115040d0c0e4f15130e0e11041321060c00080d4f020e0c">[email protected]</a></a></h4>
    </div>
  </div>
</div>

Answer №2

To align the content in the center, I utilized Bootstrap's offset class along with adding text-align:center; property.

Please be aware: This approach is specifically designed for browser sizes falling within the col-xs range. By including col-md, the layout will switch to that once it reaches the col-md breakpoint. To ensure consistency across all sizes, consider removing col-md from both div elements so that col-xs becomes the default class.

body {
  text-align: center;
}

.profile-pic {
  border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-xs-8 col-xs-offset-2">
      <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853">
    </div>
    <div class="col-md-10 col-xs-8 col-xs-offset-2">
      <h1>Telmo "Trooper"</h1>
      <h4><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0175646d6c6e2f75736e6e71647341666c60686d2f626e6c">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097d6c656466277d7b6666796c7b496e64686065276a6664">[email protected]</a></a></h4>
    </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

Instead of having the animation loop in three.js, let's set it to

After successfully exporting blender JSON animation into THREE.js, I have encountered a situation where everything is functioning correctly. However, my current goal is to only play the animation once and then stop instead of having it loop continuously. ...

htmlanimationthree.jsblender

Changing the visual appearance of an alert in JavaScript and HTML

My knowledge in JavaScript is limited, but I have a script that retrieves a query from a Python service to a Mongodb database. The query is returned in the following format: [{CHAIN: "STREET ELM, ELMER", CODE: "1234"}, {CHAIN: "STREET LM, LMAO", CODE: ...

javascripthtmlajax

What is the best way to wrap Bootstrap 5 columns according to the text inside them?

When using Bootstrap 5, is there a way for Bootstrap to arrange two rows with one column each if the text in one cell is wrapped and contains "My text" or "My other text"? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

csstwitter-bootstrapbootstrap-5

Activate event starting from parent and ascending through child nodes

When I have a table inside a <div class="timely"></div>, and within that table is a <th class="prev"><i>previous</i></th>, Chrome developer tools show an event listener on the <th>. However, Firefox developer tools ...

javascriptjqueryhtmleventsevent-handling

I am attempting to integrate the file path of my images using PHP

Let me start off by showing you the file structure of my website. File Structure Of my website In order to organize my code, I created a header file named header.html.php which contains all the necessary elements for the header, including an image tag fo ...

phphtml

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTM ...

javascripthtmlcssangulartypescript

Images with fadeIn-Out effect on a slide restrict the movement of the div

I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...

javascriptjquerycss

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

What could be the reason for the malfunction of my checkbox styling?

I have designed custom checkboxes and radio buttons with CSS styling as shown below: input[type="checkbox"]:checked + label:after, input[type="checkbox"][checked="checked"] + label:after, input[type="radio"][checked="checked"] + label:after, input[type="r ...

javascriptjqueryhtmlcssangularjs

Bootstrap: Refreshing button designs

I've encountered an issue with a bootstrap button generated via ajax - the newly created button doesn't seem to have the correct bootstrap styling applied. How can I go about refreshing the styles for this button? ...

ajaxtwitter-bootstrap

Is there a way to switch an input's appearance to resemble that of a label?

Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...

htmlcsstwitter-bootstrapangularjs

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom

Is it necessary to specify the declared language in an HTML document?

Is there a way for me to include 'lang="en"' at the end of my opening html tag without manually writing it in? Unfortunately, I don't have direct access to edit the code (ecommerce package), but I want to indicate the site language somehow. ...

jqueryhtmlcssappendlang

Position the center button evenly between two images, aligned vertically using percentages

I'm attempting to achieve a specific layout that includes images scaling across Bootstrap breakpoints and a static button position. The challenge is maintaining the layout as depicted in the mockup, regardless of image size. The images are set to im ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

I am looking to populate a table with data from an XML file as shown below: <table> <th>Head 1</th><th>Head 2</th><th>Head 3</th> <tr><td></td><td></td><td></td></tr> ...

htmljquerycssxml

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...& ...

javascriptreactjstwitter-bootstrapjsxreactstrap

Section separators within ordered lists

I am currently working on creating a "reference document" section within a Webhelp Responsive website that I have developed using a DITA map. My goal is to display a typical document list with unique reference numbers ([1], [2], [3]...[N]) followed by rele ...

htmlcsshtml-lists

Effortlessly glide through columns in Bootstrap 4

On my page, I have three columns with a class of col-md-6. Initially, only box1 and box2 are visible. When the user clicks on the button labeled BTN, I want to display box2 and box3, smoothly transitioning all boxes to the left. I attempted using jQuery ...

jqueryhtmlcssbootstrap-4css-animations

Table Dimensions Dream Weaver

After creating a basic PHP webpage using Dream Weaver CS5 Version 11.0 Build 4964, I encountered an issue. My webpage is structured with a table containing 10 rows, each row consisting of a single cell. Within each table cell, there is a nested table tha ...

phphtmlcsshtml-tabledreamweaver