I'm having trouble centering these elements using align-items or my-auto

I have tried using align-self-center and my-auto to center these h3 and p tags, but for some reason they are not centered. What could be causing this issue? `

 <div class="container production">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-12">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <div class="row production-row">
                    <div class="col-md-6">
                        <img src="{{ asset('images/picture.png') }}" class="img-fluid"alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="align-self-center">
                            <h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
                            <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
                        </div>
                        
                    </div>
                </div>

htmlcssbootstrap-4

Answer №1

Follow these instructions:

<div class="col-md-6">
   <div class="text-center">
      <h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
      <p class="text-break">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
   </div>
</div>

Answer №2

If you're using bootstrap, you can achieve center alignment by applying the text-center class instead of align-self-center to your h3 and p tags.

h3, p{
text-align:center;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d796378637e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container production">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-12">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <div class="row production-row">
                    <div class="col-md-6">
                        <img src="https://via.placeholder.com/150" class="img-fluid"alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="align-self-center">
                            <h3>aaaaaaaaa</h3>
                            <p>bbbbbbbbbbbbbbbbbb</p>
                        </div>

                    </div>
                </div>

Answer №3

Another way to easily center align h3 and p elements is by utilizing bootstrap classes with the class name align-items-center

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

Simultaneously scroll through various div elements

Is there a way to synchronize scrolling across multiple div elements? I want the scroll position in one div to be reflected in all other divs. Since I am creating the div dynamically, I am using the function document.getElementsByClassName sub-category-co ...

javascriptjqueryhtml

What does it mean in Javascript when b1 is undefined while o1 has a value and is equal to b1?

Having some issues getting variables to work with drop down options on a page. At first, I couldn't even extract a value from the function but managed to do so by removing "var" from o1. Strange thing is, when I type o1 into the js console on chrome i ...

javascripthtmlfunctionvariables

What is the method for overlaying text and a hyperlink onto an image in Bootstrap?

After spending a considerable amount of time tweaking positions, z-index values, and other properties in an attempt to make Bootstrap work seamlessly on top of an image, I have arrived at what I believe is the most efficient code snippet. img { disp ...

css

Is there a way to ensure that my Delete Entry Button is fully operational?

Excuse my lack of experience in coding. I've been struggling with getting my delete button to function properly on both my webpage and my MySQL database. Right now, when I click the delete button, it just redirects me to a URL ending in /delete withou ...

htmlmysqlvue.jssass

Phonegap experiencing difficulty converting HTML5 mobile app for IOS compatibility

After creating a Mobile Application project on Dreamweaver CS6 with HTML5, CSS3, and AJAX, I encountered an issue when trying to upload it on Phonegap. The app only converted successfully for android and windows, but showed errors for IOS and Blackberry. ...

androidioshtmlmobilecordova

How can I use AJAX to remove a record from a MySQL table?

I am looking to create a button with an image X that, when clicked, will delete a row from the database at that exact moment. teste-checkbox.php <style> table { font-family: verdana; font-size: 12px; } table th { text-align: left; backgrou ...

phpjqueryhtmlmysqlajax

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Currently, I am working on creating an SVG that includes an image from an external URL: https://i.stack.imgur.com/4iGwt.jpg: <svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns= ...

htmlimagesvgcontent-security-policy

Using JQuery to eliminate div elements

I've been struggling to implement the remove function on my HTML page without success so far. I have three rows, each with a remove button, and I want to create an effect where clicking on the remove button makes the entire row disappear. Any assistan ...

javascriptjqueryhtml

Text hyperlink populates form fields

I am interested in learning how to create a clickable text link that can automatically populate specific information in a form located above it. For example, I have a donation form with fields for amount, country, and projects. Below this form, there are ...

javascriptjqueryhtmlforms

Using array.map() in React does not display elements side by side within a grid container

I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...

javascripthtmlreactjsmaterial-ui

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

Cannot adjust the chosen rage within the Material Date-Rangepicker

I'm trying to customize the colors of a material date range picker, but I can't seem to find the right class for the selected range. https://i.sstatic.net/P4Rys.png So far, I've managed to change the color of the selected range using the f ...

cssangularangular-material

The jQuery notification box fails to appear on the screen

I am attempting to showcase a popup box from a div using the following code. Despite successfully adding a record, the div does not show up. I have experimented with $("#div").html. Script: <script src="scripts/jquery-1.11.1.min.js "></script&g ...

javascriptjqueryhtmlcss

What is the process for incorporating an HTML tag into the text of an ASP.NET label?

When working on a news page, I encountered an issue trying to create hyperlinks based on a specific value in a database field. Some news articles have longer content, and in those cases, I wanted to create a hyperlink. However, for shorter content, there w ...

c#htmlasp.net

Excessive CSS styling causing content on the right side of the page to overflow beyond the boundaries on wide screens

My HTML page appears fine on my 15-inch laptop screen, but users with wider screens have reported that the text spills too far to the right. I don't want to include the view-source HTML due to its length, so I'll just provide a link to the page. ...

htmlcssfirebug

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss

What is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

Can the size of a linear gradient be predetermined in CSS?

When working with CSS, it's possible to set various properties of a linear gradient such as color, position, orientation, and width. However, is it feasible to define its length? I prefer not to use SVG and am specifically looking for a CSS-based solu ...

htmlcss

Issue with EaselJS: mouse events are no longer functional

I'm currently working on adding a touch animation using the EaselJs library. Interestingly, when I load an image from a local folder, all mouse events work as expected, such as onPress. However, things take a different turn when I opt to use an imag ...

javascripthtmlmouseeventeaseljs

Load images dynamically onto canvases overlayed on top of each other and adjust their size accordingly

I have a unique situation where I have two canvases stacked on top of each other. My goal is to dynamically load images into these canvases and adjust their size to fit the image dimensions. The issue I am facing is that once the images are loaded and the ...

javascripthtmlcsshtml5-canvas