CSS alignment of spans, inputs, and buttons_问答_开发者

CSS alignment of spans, inputs, and buttons

开发者 https://www.devze.com 2023-03-05 19:05 出处：网络

I\'m looking for a way to align a number of elements (spans, inputs, and buttons) such that desp开发者_Python百科ite their differing sizes, their vertical mid point is on the same horizontal line:

相关专题：alignment css

I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that desp开发者_Python百科ite their differing sizes, their vertical mid point is on the same horizontal line:

CSS alignment of spans, inputs, and buttons

How do I achieve this in CSS? Here's the HTML file to play with:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <style>
.content { font-size: 18px; border: 1px dotted blue;  }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
    </style>
</head>

<body>
<div class="content">
    <span class="label">Label: </span><input type="text">
    <span class="label">More text: </span><input type="text">
    <button type="submit">Submit Me</button>
    <div class="clear"></div>
</div>

</body>

</html>

Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.

That should work.

As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.

Your span, input and button need the property: vertical-align:middle;display:inline