Text alignment and block dimensions

I attempted to organize three buttons within a block.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center">
   <div class="bg-blue-100 hover:bg-blue-400 h-images ">
       <a class=" "
           href="#">Button 1</a>
   </div>
   <div class="">
       <a href="#">Button 2</a>
   </div>
   <div class="">
       <a href="#">button 3</a>
   </div>
</div>

The image was set to a size of 810px in the tailwind.config.js file. How can I make the buttons match this size and have the text centered within the block? I tried setting h-100 or h-full, but these solutions didn't work. The only one that worked was h-screen, however, this made the buttons the size of the screen instead of the containing block. https://i.sstatic.net/JpV43.png

htmlcsstailwind-css

Answer №1

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center" style="align-items:center;">
   <button class="bg-blue-100 hover:bg-blue-400 h-images " style="min-width:auto; margin: auto; min-height:810px;">
       <a class=" "
           href="#">Button 1</a>
   </button>
   <div class="">
       <a href="#">Button 2</a>
   </div>
   <div class="">
       <a href="#">button 3</a>
   </div>
</div>

If you're open to using inline CSS, you can utilize this code to adjust the height of your button to 810px, matching the size of the image you mentioned. The width is set to auto to adapt to the image dimensions.

Answer №2

It seems a bit unclear. Here is the information you may need

.d-block{
    display: block;
}
.button{
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}
.button:hover{
  backround-color:#d7eeff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="d-block">
   <div class="bg-blue-100 hover:bg-blue-400 h-images button">
       <a class=""
           href="#">Button 1</a>
   </div>
   <div class="button hover:bg-blue-400">
       <a class="" href="#">Button 2</a>
   </div>
   <div class="button hover:bg-blue-400">
       <a class="" href="#">button 3</a>
   </div>
</div>

Answer №3

To align buttons horizontally, you can use the CSS property ""display: inline"", or ""display:inline-flex"" to ensure all buttons have the same width based on the screen's width.

//CSS

.btn-style{min-width:auto; margin: auto; min-height:210px;width:32.9%;}

//HTML

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center" style="display:inline; align-items:center;">
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a class=""
           href="#">Button 1</a>
   </button>
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a href="#">Button 2</a>
   </button>
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a href="#">button 3</a>
   </button>
</div>

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 the best way to retrieve the initial cell from a row that the user is currently hovering over?

Is there a way to extract the first cell from a row when a user hovers over it and then clicks a specific key combination? (considering using jQuery) I have a table set up similarly where placing the mouse over a tr and pressing ctrl+c will copy the ID t ...

javascriptjqueryhtmlcssmouseevent

What is the best way to create a taskbar using HTML or Javascript?

I'm currently developing an innovative online operating system and I am in need of a functional taskbar for user convenience. The ideal taskbar would resemble the Windows taskbar, located at the bottom of the screen with various applications easily ac ...

javascripthtmlwebtaskbar

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

jqueryhtmlcss

An alternative method to confirm the checkbox selection without physically clicking on it

Currently, I'm in the process of creating a basic to-do list and have been attempting to connect the task with its corresponding checkbox. My goal is for the checkbox to automatically be checked when the task is clicked. Instead of using HTML to add ...

javascripthtmleventscheckboxlabel

Show the outcome of a mysql_query in PHP directly within MYSQL

I've been trying to figure out how to display my MySQL results in PHP using tables. Despite doing a lot of research on this topic, I haven't been able to find a solution yet. Here's the code that I have: <html> <head> </head& ...

phphtmlmysql

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...

htmlcsscss-grid

Adjust image size based on window dimensions changes

Let me demonstrate the issue I'm facing with this demo. This demo shows a simple list of images that scrolls across the page. When you click on an image, a larger version appears above it in a lightbox style. I want the height of this larger image ...

css

Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning. <section> <h2 style= ...

htmlcssimagebootstrap-4

Navbar-toggle divider shade

I am having trouble changing the color of the line break on the Twitter Bootstrap 3 navbar-toggle function. Upon viewing this image, you can see that there is a line break using my background color. https://i.sstatic.net/qgVAm.jpg I have tried several o ...

csstwitter-bootstraptwitter-bootstrap-3

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

"Filtering and extracting particular form elements to be sent to the $_POST superglobal array

Currently, I have a table filled with data that is editable by administrators. There is a submit button to apply all changes, but I am interested in knowing if it is possible to only send the data that has been modified. One idea is to add a checkbox that ...

phphtmlformspost

AngularJS: Default value causes dropdown menu text to not display

I am facing an issue with my select menu. <select id="dd" ng-show='data != null' ng-model='search'></select> Initially, I set the filter to display only USA by default. $scope.search = 'United States of America' ...

javascriptjqueryhtmlangularjs

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

I'm experiencing difficulty positioning my iframe within its section container as it appears to be placed outside of it

I'm struggling to understand why my iframe is positioned outside of the designated section. Check out my GitHub Pages site here and view the repository here. Any assistance would be greatly appreciated! ...

htmlcssbootstrap-5

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

javascripthtmlhtml5-canvas

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

I've encountered an issue with a series of divs that are set to toggle the state of a collapsible div upon clicking (similar to an accordion widget). The functionality works as intended, but I'm facing a challenge - I want the page to scroll to t ...

javascriptjqueryhtmlscrolltop

Adjust the transparency of a navigation bar independently from the transparency of the text within the navigation bar

Seeking assistance on adjusting the opacity of this navbar without affecting the text within it. Any tips on changing the text color as well? <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#" ...

javascripthtmlcssbootstrap-4

What is the purpose of Firebug adding <tbody> elements to <table> tags?

While analyzing the HTML source code, I noticed that the <tbody> tag is missing. However, when inspecting the code using Firebug in the HTML tab, the <tbody> tag suddenly appears. What could be the reason behind this discrepancy? ...

htmldomfirebug

A hobby project involving the creation of a webmail app using a combination of PHP

As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...

phphtmlimap

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

javascriptjqueryhtmlarraysfor-loop