What's the best way to ensure a paragraph element larger than its container is centered using bootstrap?

Need help with centering a paragraph element (email) that is larger than its container:

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

Here's the code I have so far:

<div class="col-lg-2 col-lg-offset-1 text-center">
    <a href="mailto:{{ site.email }}">
    <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
        <p>{{ site.email }}</p>
    </a>
</div>

I've attempted to use text-center on the paragraph element directly, but it isn't working. Any suggestions on how to properly center this element?

htmlcssbootstrap-4

Answer №1

There are multiple methods to accomplish this, but my preferred method involves using the position property.

  • Ensure that the container or parent element has a position set to relative.
  • Add the following style attributes to the paragraph: 
    position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

I trust that this approach will be beneficial for you.

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

Building a sleek and responsive navigation bar using HTML, CSS, and Bootstrap is

As a newcomer to programming and completely new to HTML, I am currently working on a class project for my Web Development course. The task involves creating a webpage for a fictional company named "DW Gift Company." One of the requirements for this project ...

htmlcssbootstrap-4navbaradobe-brackets

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

Hello everyone, I need help solving an issue with my responsive HTML website. It works perfectly on a desktop browser, but when viewed on a mobile device, it gets stuck and won't scroll. Any suggestions on what might be causing this problem? Thank you ...

htmlcssweb

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

htmlcssnode.js

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

NiceScroll is failing to show up after an Ajax reload

I've been searching everywhere for a solution to my problem. The issue I'm facing with the AJAX load and nicescroll plugin is a bit unique compared to what I've found so far. The problem is that Nicescroll isn't functioning on a separat ...

jqueryhtmlajaxnicescroll

The Django image upload is not successful when attempting to use JavaScript from a string of markup code

I have successfully implemented django dynamic forms that work upon clicking, but I am facing an issue with uploading images. I made sure to include request.FILES and added enctype="multipart/form-data", however, the image upload still doesn't seem t ...

javascripthtmldjangoformsfile-upload

What is the best way to divide MySQL content (text and HTML) into multiple columns?

Before diving in, I want to acknowledge the hesitation around asking questions without first trying some trial and error. However, in this case, the need for specific knowledge is essential, so I am going to proceed with my query. I have been grappling wi ...

phphtmlmysqlcss

The contact form in Laravel 5.7 seems to be malfunctioning as it is unresponsive and not displaying any errors

Here is the contact form along with the form action: <form action="{{ route('contact.send')}}" method="post" class="contactForm"> <div id="sendmessage">Your message has been sent. Thank you!</div> &l ...

laravelbootstrap-4

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

javascripthtmlcssbootstrap-4

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Strip the pound symbol from the end of a URL during an AJAX request

When I click on the News tab in my Rails application (version 2.3.4 and Ruby 1.8.7), an Ajax call is triggered to load data. <a href="News" onclick="load_feed();"><u>Show More...</u></a> <script> function load_feed() { $.a ...

javascripthtmlruby-on-railsajax

Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when ...

htmlcssresponsive-designnavbaryui-pure-css

Obtain and utilize the background color to easily implement the same color in another window

For my Chrome Extension project, I am looking to retrieve the background color of the current page and then set the background color of a window to match. Can someone guide me on how to accomplish this using JavaScript (with or without jQuery), and if ne ...

javascriptcssgoogle-chrome-extensionwindowbackground-color

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

javascriptjqueryhtmlcssjqgrid

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

For weeks, I've been struggling to change the name of the downloaded file. Despite my efforts, instead of being named Chrysanthemum.jpg, it ends up as a hash of the file like 241693260.jpg In my backend setup, I utilize Node.js and Express.js for man ...

javascriptnode.jshtmlexpress

What is the best way to display the current page within a frame in HTML?

Having some trouble creating a frame on my web page. Utilizing the <IFRAME> tag to create it. My file is named Testing.html. Here's an example: <IFRAME src="Sample.html" style="width:800px; height: 250px; float:right; border:none"></I ...

phphtmliframe

Ways to conceal text or a div element and substitute it with asterisks

I'm seeking assistance with a concept involving a simple toggle button that can hide an object and replace the empty area with ****. My initial idea was similar to a password form input where you can conceal the password by clicking an eye icon. Howe ...

javascripthtmljquerybootstrap-4

Generate a div dynamically and incorporate a function that triggers on click event dynamically

In my current project, I am faced with a challenge due to laziness. My goal is to automatically generate menu buttons that are linked to different sections of a page using raw JavaScript. The issue arises when the body content of my site is loaded from an ...

javascripthtml

What steps should I follow to create a basic file upload page on my server?

Recently, I've been on a quest to create a straightforward file upload page that allows me to easily send files to my server. The concept is for the site to have a feature where I can simply upload a file and have it stored in a specific folder on the ...

html