What is the best way to align this button directly below my paragraph?

I'm facing an issue with a tile on my website that flips over upon hovering. I tried adding a button on the back of the tile, but it ends up hanging off the bottom. I'm unsure of how to position it below the paragraph on the back of the tile. Additionally, I'm having trouble centering the header of the tile. I attempted using 

text-align:center;

but it doesn't seem to be working.

Here's the code I'm working on. If you run it and hover over the first black tile, you'll notice the text 'eternally rustled'. That tile is where I'm facing the issue. Any assistance would be greatly appreciated. Thank you.

htmlcsscss-position

Answer №1

After carefully examining the details provided, I believe I have found a solution for you! By enhancing the "btile" section of the CSS with the following additions, I was able to address the issue:

#btile {
    width:350px;
    text-align:center;
}

To resolve the header problem, I made a simple modification by including the width property in the code snippet below:

.webname {
    width: 350px; // Added this line
    font:800 17px/17px"open sans";
    color:#333;
    text-transform:uppercase;
    text-align:center;
    border-top:1px dashed #888;
    z-index:50;
    position:absolute;
    text-align:center;
}

The width value corresponds to the dimensions of your image. Ensure that the div width matches the image size for optimal results. For a visual representation of the changes implemented, you can refer to this JsFiddle. Feel free to reach out if you encounter any difficulties with the adjustments! :)

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

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

javascriptjqueryhtmlcss

Having difficulty getting the HTML table formatting and colors to display properly

Explore the custom netting options for baseball and softball batting cages here. It seems like there might be an issue with displaying tables and background colors in the description field. We'll look into it! ...

htmlcssmagento

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

Attempting to consistently place an element at the bottom of my div container

I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...

htmlcss

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Is there a way to make Bootstrap JS Collapse text Bold after it has been clicked on? <tr data-toggle="collapse" data-target="#demo8" class="accordion-toggle"> <td> <div class="fa ...

javascriptjquerycssbootstrap-4

Verify whether all the elements within a specific div are distinct by utilizing jQuery

I need to create a select box that, when an option is chosen, generates a certain number of textboxes within a div. Currently, there are three fields: display_name[], user_name[], and user_password[] The code for this functionality is as follows: <se ...

javascriptjqueryhtml

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

htmlcsstexttextarea

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...

javascriptandroidjqueryhtmljquery-mobile

Conceal a section of a container with the click of a button within a WordPress Plugin

I am currently utilizing a Wordpress plugin known as contact form 7 to construct an email list for an upcoming website project. The client has specifically requested that we avoid using services like mailchimp due to their preference of not sending ANY ema ...

javascriptjqueryhtmlwordpress

Creating a CSS class dynamically with AngularJS: A step-by-step guide

I'm working on an Angular JS website that pulls data from an API to create a dynamic CSS class. This class will be used to format other data being displayed on the page. Is there a way for Angular JS $scope data to be generated in the Controller whil ...

cssangularjsclassdynamically-generated

Verifying that the class name prefix aligns with the folder name using Stylelint

Currently, I am utilizing the "selector-class-pattern" rule from stylelint. My chosen pattern enforces the ECSS naming convention. The specific rule configuration is outlined below: "selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z ...

cssstylelint

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

I am currently working on code that extracts information from a JSON variable and displays it on a map. The code looks like this: marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4> ...

javascriptjquerycss

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

I have successfully implemented overflow-y: scroll; to keep the scrollbar space always reserved and prevent content from shifting when the scrollbar appears. However, I noticed that when I click on a select element, this scrollbar space is lost. How can I ...

cssreactjssassmaterial-uireact-hooks

The comparison between dynamically adding elements through Javascript and hiding them using CSS

I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...

javascripthtmlcss

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

Discovering the id of the current active tabpane is possible by using

Is there a way to retrieve the id of the currently active tab-pane every time I switch tabs on my page? Depending on which tab-pane is active (tab-pane1, tab-pane2, tab-pane3), I want to store the respective value (tab-pane1 = 1 and so on) in a variable an ...

javascripthtmljquerytabsbootstrap-5

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml