Ways to center h2 in a nested div

Having trouble aligning the text within my h2 element vertically in a div. Using .NET MVC.

Here is the HTML that's causing issues:

.banner-side-container {
  height: 240px;
  width: 180px;
  vertical-align: middle;
}

.banner-side-container h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.view-teams-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: aqua;
  border-radius: 20px;
}

.view-matches-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: darkorchid;
  border-radius: 20px;
}
<td>
  <div class="banner-side-container">
    <div class="view-teams-banner">
      <h2>View Teams</h2>
    </div>
    <div class="view-matches-banner">
      <h2>View Matches</h2>
    </div>
  </div>
</td>

Tried adding vertical-align: middle to all selectors with no luck. Also, text-align: center worked perfectly.

htmlcssvertical-alignment

Answer №1

If you want to utilize flex, you can apply the following configurations to the three elements surrounding the h2 tags and their parent elements:

display: flex;
flex-direction: column;
justify-content: center;


.banner-side-container {
  height: 240px;
  width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-side-container h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.view-teams-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: aqua;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.view-matches-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: darkorchid;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<td>
  <div class="banner-side-container">
    <div class="view-teams-banner">
      <h2>View Teams</h2>
    </div>
    <div class="view-matches-banner">
      <h2>View Matches</h2>
    </div>
  </div>
</td>

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

What is causing the input tag and button tag to appear on separate lines instead of together?

https://i.sstatic.net/AQiw3.png Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = ...

htmlcss

The custom marker created with Leaflet using divIcon does not seem to be styled with the specified

I'm currently working on customizing the leaflet marker using a divIcon and custom HTML. My aim is to have my marker displayed similarly to this example: https://i.sstatic.net/a5RnY.png So far, I've managed to create a marker and a divIcon with ...

htmlcssangulartypescriptleaflet

Ways to transfer information from HTML form components to the Angular class

I am currently working with angular 9 and I have a requirement to connect data entered in HTML forms to the corresponding fields in my Angular class. Below is the structure of my Angular class: export interface MyData { field1: string, textArea1 ...

htmlangulartypescriptangular-forms

What's the best method for updating a div on a webpage to display the most current information from the database?

In my small blog project, I have implemented a viewcount feature that tracks the number of times a particular post has been viewed. However, the issue I am facing is that the value of viewcount does not update unless the entire page is refreshed. To addres ...

javascripthtmldjangoajax

Injecting information into an input field using the :before pseudo-class in CSS when focus

In order to have a static part "+91" displayed in an input field upon focus, I have successfully replaced the placeholder during onFocus and onBlur events. However, I am unable to add a listener to read content from :before. <div class="goal-mobile"> ...

javascripthtmlcssvue.js

The hover effect does not seem to be functioning properly within the <th>

I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...

jquerycssmodel-view-controller

Issues with basic calculator implemented in HTML

Recently, I've been dabbling in HTML. My goal is simple - to create a form where users can input two numbers, add them together, and see the result in one of the input fields. Here are the two input fields: <input type="text" id="Nu ...

javascripthtmlcalculator

Incorporating Bootstrap with Leaflet: A Seamless Integration

Having trouble integrating my bootstrap-based website with a Leaflet webmap. There seems to be a vertical shift in the Mapbox tiles. I suspect it's a conflict between the .css files of Bootstrap and Leaflet. You can check out my webpage at this link ...

htmlcsstwitter-bootstrapleaflet

Utilizing Reveal and Interchange for an Adaptive Lightbox in Foundation 4

Can Foundation 4 Reveal be used with images in a way that they are only loaded when the user clicks an element to open the modal? My objective is to create an Adaptive Lightbox using Interchange. When a user clicks on a thumbnail, it should display an ima ...

csszurb-foundationadaptive-design

Internet Explorer experiencing printing issues

Can anyone explain why IE (8,9 Tested) is refusing to print the right side of this coupon on the red background? The left side (phone number) prints fine. Other browsers like Chrome and Firefox print the whole document correctly. To see the bug, you can ...

cssinternet-explorerprinting

Retrieving HTML code as a variable using Python

I am attempting to output HTML code as a variable in my Python script, but it's not working properly. What could be causing this issue? Here is an example of my code: return render_template("dashboard.html", services = "<h1>Service 1</h1> ...

pythonhtmlflaskjinja2

Using JQuery to append an additional column to an HTML table at the end, determined by array information

I've been experimenting with how to enhance an html table by adding a new column of data. The process involves clicking a button, extracting the existing data column in the table, storing it in an array, performing calculations on it, and then display ...

javascriptjqueryhtmlarrays

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution. I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it. Here is the HTML for the ...

javascriptjqueryhtmlcss

"Create a Single-Page Bootstrap Website with a Responsive Design showcasing PHP Code within the Contact Form

Working on the final touches of a single-page responsive website project for a client. Utilizing a Bootstrap contact form located at the bottom of the HTML document. The PHP code is unexpectedly displaying in the text fields of the contact form. I've ...

phphtml

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...

htmlangularjs

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

Having trouble with the collapse feature on my DataList cards

I have a sample card and a DataList on my webpage. The collapse functionality is functioning correctly on the example card, but I am unable to get it to work on the actual cards. Below is the code snippet for reference: <div class="resultadosEspe ...

htmlasp.netbootstrap-4

Creating a multi-line form in Python Django involves defining a form

Brand new to Django and currently working on creating a form within a page. The form consists of multiple fields, all of which are currently displayed in a single line on the page. This is the code snippet I am using in the template: <form action=&apos ...

pythonhtmldjangobootstrap-4

Creating a legitimate svg element using javascript

While working with SVG, I had an issue where I added a <rect> element directly into the svg using html, and then created a new element (without namespace) <circle> with javascript. However, the <circle> element did not display in the svg ...

javascripthtmlsvgconstructorconsole

Tips for styling a button upon being clicked

Is there a CSS technique to make a button change color when clicked with the mouse? I am aware of using ':hover' for changing color, but I need something specific to a left mouse click. I want the same functionality as a standard button but with ...

javascriptjqueryhtmlcss