How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Question

How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Looking for a solution to a design issue I'm facing. You can view the situation here: jsfiddle

<button type="submit">
    <div class="icon"></div>
</button>

button {
    width: 250px;
    height: 250px;
    background: orange;
    padding: 0px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.icon {
    width: 150px;
    margin: 0px auto 0px auto;
    height: 80px;
    display: block;
    position: relative;
    background: pink;
    vertical-align: top;
}

The issue I'm encountering is that the div inside the button is not aligning to the top as I want it to. Even when I try setting negative top values or vertical-align top, the alignment doesn't seem to work correctly. This problem doesn't occur when using an a-tag instead of a button with the same CSS rules.

Has anyone faced a similar problem or have any ideas on how to resolve this?

html css button

Answer 1

Answer №1

Here are two possible solutions, please try them out:

.icon{
position: absolute;
top: 0;
left: 45px;
}

or

.icon{
position: relative;
top: -85px;
}

Answer 2

Here are two possible solutions, please try them out:

.icon{
position: absolute;
top: 0;
left: 45px;
}

or

.icon{
position: relative;
top: -85px;
}

Answer 3

Answer №2

It is not recommended to place <div> inside a <button> as it is not considered valid in the document structure.

To resolve this issue, replace <button> with <div> as shown in this example (JSFiddle):

<div type="submit">
    <div class="icon"></div>
</div>

Here is the CSS code for the updated structure:

div[type="submit"] {   // The only change needed to properly match the div element
    width: 250px;
    height: 250px;
    background: orange;
    padding: 0px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.icon {
    width: 150px;
    margin: 0px auto 0px auto;
    height: 80px;
    display: block;
    position: relative;
    background: pink;
    vertical-align: top;
}

Answer 4

It is not recommended to place <div> inside a <button> as it is not considered valid in the document structure.

To resolve this issue, replace <button> with <div> as shown in this example (JSFiddle):

<div type="submit">
    <div class="icon"></div>
</div>

Here is the CSS code for the updated structure:

div[type="submit"] {   // The only change needed to properly match the div element
    width: 250px;
    height: 250px;
    background: orange;
    padding: 0px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.icon {
    width: 150px;
    margin: 0px auto 0px auto;
    height: 80px;
    display: block;
    position: relative;
    background: pink;
    vertical-align: top;
}

How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Answer №1

Answer №2

Similar questions

Creating a customized icon scheduling feature with CSS

What exactly is the role of the @altfontfamily variable in Bootstrap?

Showing nested arrays in API data using Angular

Connect radio input's value to object's key within AngularJS

How can I set the text to be in the center of a VML

Implementing a JQuery function to generate a popup whenever a user clicks on a table row (tr) in an

What is causing the div to expand even though css max-width is applied?

Include a tab button within a vertical tab list using Angular Material

Show the user's input within a clickable button

Need inspiration for testing web content with Protractor?

I am experiencing some unwanted movement of divs when I hide one element and show another. Is there a way to prevent this from happening

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Trouble with HTML Contact Page Email Delivery

The getBBox() method of SVG:g is returning an incorrect width value

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

Tips for adjusting the header color in materialize framework?

Is it possible to create a mouse-following effect with lighting using Javascript

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

Responsive grid made with HTML and CSS to create dynamic DIVs

MaterialUI Box reigns supreme in the realm of background images