What is the best way to position a button under an h3 heading using the display flex

Inside my div, I have an h3 and a button. The div uses display:flex; with justify-content:center; and align-items:center;. However, the button ends up sticking to the right side of the h3. I attempted placing the button in its own div, but this caused a layout issue.

How can I position the button under the h3? Are there additional flex properties missing?

.title-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/background.png) 0% no-repeat;
  padding: 0;
  min-height: 495px;
}

.title {
  text-align: center;
  width: 555px;
  color: #fff;
  font-size: 42px;
  margin: 0;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: wrap;
  border: 1px solid white;
  border-radius: 5px;
  background: none;
  color: #fff;
  font-size: 25px;
}
<div class="title-block">
  <h3 class="title">Text here</h3>
  <button type="button" class="button">View more</button>
</div>
htmlcss

Answer №1

To make the layout vertical, simply include flex-direction: column.

Before proceeding, please note that there is a syntax error:

<div class="tittle-block>
- you must close the class tag, like this 
<div class="tittle-block">

.tittle-block{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: url(../img/background.png) 0% no-repeat;
   padding: 0;
   min-height: 495px;
   }

 .tittle{
   text-align: center;
   width: 555px;
   color: #000;
   font-size: 42px;
   margin: 0;
   }

 .button{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: wrap;
   border: 1px solid white;
   border-radius: 5px;
   background: none;
   color: #000;
   font-size: 25px;
   }
<div class="tittle-block">
   <h3 class="tittle">Text here</h3>
   <button type="button" class="button">View more</button>
</div>

Please remember to change the font color back to your original #fff, as I modified it for visibility purposes.

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

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue. I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperl ...

htmlcsshyperlinkcss-selectors

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

javascripthtmlcss

Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript. let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.sty ...

javascripthtmlcsscss-transitionsdom-manipulation

Tips for aligning images directly alongside text without any separation

I'm currently learning html and facing some challenges with coding my own blog page. My main issue is trying to design a section that leads to the latest post, but I can't seem to get the layout right. I envision having the text and image neatl ...

htmlcssimagecss-float

Change the font awesome class when the button is clicked

Here is the code I have in this jsfiddle. I am trying to change the font awesome icon on button click using javascript, but it doesn't seem to be working. I am new to javascript, so please pardon me if this is a silly question. HTML <button id="f ...

javascriptjqueryhtmlfont-awesome

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it. Here is the code snippet that I'm currently using: function followIt(e) ...

javascripthtmlcssdom-events

Aurelia validator fails to refresh user interface

Despite the aurelia-validator plugin working correctly for form submission and validation, with all properties updating properly, the UI does not reflect any changes. There is no red outline around incorrect properties or error messages displayed. I have r ...

javascripthtmlvalidationaurelia

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

Basic PHP code for fetching outcomes

Looking to retrieve results from a website by utilizing a for loop to gather and compile them together. (Please note that it involves an ASP request which generates a webpage with specific parameters) I have drafted this code in attempt to achieve the de ...

phpasp.nethtml

Use sed to extract integers from HTML based on various criteria

Before we continue, I must confess: I realize using regex to parse HTML is generally frowned upon, but if Chuck Norris can do it, why can't I? ;) My goal is to extract specific data from this HTML page: http://pastebin.com/unAifctF based on thre ...

htmlbashparsingsed

Having trouble with jQuery modal not adjusting its height properly

I am a jquery modal popup newcomer. I can open the modal when clicking on the hyperlink, but I'm having trouble with the height setting. Despite my attempts and searches online, I couldn't figure it out. When trying to post a question about the & ...

javascriptjqueryhtml

The hamburger icon on my website is not appearing even after implementing the media query

Despite adjusting the media query, I'm facing an issue with displaying the hamburger menu. Although the navbar links disappear correctly, the menu itself refuses to show up. *, *::after, *::before { box-sizing: border-box; margin: 0; paddin ...

htmlcssmedia-queriesnavbarhamburger-menu

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

javascriptjqueryhtmlcss

Struggling to access a .html page using Selenium?

Currently utilizing behat/mink, selenium 2 driver, and chrome driver in php to navigate a unique issue. Attempting to access a dummy HTML page proving challenging. Our team is implementing a chatbot onto our main site's landing page as an iframe posit ...

phphtmlseleniumbehatmink

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

javascripthtmlangularjs

CSS Style for Organizing Content

I'm struggling to create CSS for a hierarchical display, resembling a tree structure of files and folders. Currently, I am using nested unordered lists in my HTML: <ul> <li>animals<ul> <li>dogs</li> <li>c ...

htmlcsshtml-lists