I'm having trouble with my align-items code - can anyone help me figure out what

I have been attempting to vertically align the image and text without success using the "align-items" property. My website is based on a Bootstrap template. After inspecting the section, I noticed it says "display: block." Could that be causing the issue? Here is a snippet of my code:

html;

<section id="about" class="about">
  <div class="container">

    <div class="row">
      <div class="col-lg-6">
        <img src="./assets/img/about-us-img.avif" class="img-fluid" alt="about">
      </div>
      <div class="col-lg-6">
        <h3>About Us</h3>
        <p>
          About text...
        </p>
      </div>
    </div>

  </div>
</section>

css;

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  align-items: center;
}
htmlcssbootstrap-4vertical-alignment

Answer №1

Greetings, align-items CSS Property. It specifically functions with display: grid and display: flex

If not used within these contexts, it will not have any effect. One workaround is to include the display: flex property with the !important declaration, but this may alter the styling of col-lg-6

Alternatively, you can utilize position: absolute for vertical alignment. However, this approach is not considered as a best practice

Utilizing Display Flex

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  display: flex !important;
  align-items: center;
}

Using Position Absolute

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  position: relative;
  align-items: center;
}
#about .container * {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

Answer №2

Give this a shot:

.profile .box {
      position: relative;
      display: flex;
    }

Answer №3

If you want to customize the appearance of your container, consider adding a custom class and applying additional styling.

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

#about .container {
  align-items: center;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac5dac7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<section id="about" class="about">
  <div class="container about-container">
    <div class="row">
      <div class="col-lg-6">
        <img src="./assets/img/about-us-img.avif" class="img-fluid" alt="about">
      </div>
      <div class="col-lg-6">
        <h3>About Us</h3>
        <p>
          About text...
        </p>
      </div>
    </div>
  </div>
</section>

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

Tips for automatically closing one element when another is clicked

My goal is to create a menu that displays when I click on a link, and if another menu is already open, it should close before displaying the new one. Essentially, I want to achieve an accordion menu where only one menu is open at a time. However, despite m ...

javascriptjqueryhtml

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

cssdjangodocker

An array of tooltips linked to specific areas on an image using

Hello, I have created an imagemap with area polygons that display tooltips when the mouse hovers over them. Additionally, there is a legend at the bottom of the image map. My goal is to show the tooltip on the specific polygon area when the mouse is hove ...

javascriptjquerycss

Show a Popup Modal after Submitting a GET Request

How can I display the SQL code returned from various input parameters as a Modal? I am struggling to have the POST request made from inputs show up in the Modal when pressing the submit button. I know Ajax is usually involved in this process, but how do I ...

javascripthtmlflaskbootstrap-4bootstrap-modal

Creating a drop-down button group on mobile with Bootstrap: step-by-step guide

@media (min-width: 320px) { } @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } <div class="container"> <div class="row"> <div class="col-lg-24 col-centere ...

buttonbootstrap-4dropdownresponsive

Stylish CSS selector

Is there a way to target CSS path based on the style of an element? For instance, if I have two ul elements on a page - one with a style of list-style-type: lower-alpha;: <ul start="1" style="list-style-type: lower-alpha;"> and the other ul without ...

htmlcss

Firefox struggles to properly position tables that exceed a width of 767 pixels when using Bootstrap

I have designed a basic website featuring a Bootstrap navbar with tabs. Each tab displays a table. You can view the layout here. Everything functions correctly in Chrome 45 and IE 11 on Windows 8.1. However, when using Firefox, the tables are positioned ...

cssfirefoxtwitter-bootstrap-3

Having trouble reaching HTML input controls generated in the code behind from a literal

Looking for help with an issue on my aspx page. I added a literal control: <asp:Literal runat="server" ID="ControlLiteral"></asp:Literal> In the codebehind, I am using a loop to create controls dynamically. Here is an example of what I am try ...

c#htmlasp.netdynamic-controls

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

When the browser window is 2500px wide, Bootstrap's col-lg class takes precedence over col-xl in a container-fluid layout

Using Bootstrap 4.5 container-fluid with the inability to get col-xl formatting to work properly. The search criteria form looks like this: <div class="row"> <div class="col-sm-12 col-md-3 col-lg-5 col-xl-2"> <div cl ...

.netasp.net-corerazorbootstrap-4

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Include a text input field within the multipleTextBox component

How do I select a file and turn it into an option? For example, if there is a file on a server or my desktop, What is the best way to create a function that can handle this? Is AJAX the solution? <input type="text" name="name" value="text " ...

javascripthtml

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...

javascripthtmlangularjsfirebaseangularjs-ng-click

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

jqueryhtmlcssknockout.js

Mouse cursor does not display as a pointer when utilizing an SVG image on Internet Explorer

Consider this html: <a href="http://www.wikipedia.com"> <object data="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" type="image/svg+xml"> <img src="http://herdeirodocaos.files.wordpress.com/2007/11/wikipedia-lo ...

htmlcssinternet-explorersvg

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

Enhance your website with the latest jQuery plugins and CSS

Currently, I am utilizing jQuery to develop plugins for my application. It is worth noting that each plugin demands a distinct CSS file. What approach should I follow to effectively load both the jQuery file and the respective CSS? Moreover, the plugins ...

javascriptjquerycss

Issue detected: The PNG file being used with jspdf is either incomplete or corrupt

I am trying to insert two images into my pdf when the "create-pdf" icon is clicked. The first image is a canvas that converts to an image successfully. var canvas = document.getElementsByClassName("jade-schematic-diagram"); img = canvas[0].toDataURL("imag ...

javascripthtmljspdf

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

javascripthtmlcssvue.jsbootstrap-4

"Use Jquery to automatically scroll back to the top of the page after opening a new window

Currently, when a button is clicked, I am opening a new window that takes me to a specific website. However, in addition to this, I also need the new window to scroll down slightly once it opens. This is how I am currently achieving this: $(document).read ...

javascriptjqueryhtml