vertical-alignment

问题 I have this layout: My CSS : body { background: #e2eaed; } a { text-decoration: none; color: #fff; font-size: 30px; height: 62px; line-height: 62px; /* vertical-align: middle is not works */ background: #8dc73f; width: 132px; padding: 0 25px; font-size: 16px; text-align: center; font-weight: bold; margin-left: 4px; display: block; float: left; } ​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I

问题 This question already has answers here : Best way to center a <div> on a page vertically and horizontally? [duplicate] (30 answers) Closed 5 years ago . I want to align a div horizontally center and vertically middle of the body of a page. The css: .loginBody { width: 100%; height: 100%; margin: 0; padding: 0; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit

问题 I have looked at the different questions regarding this issue, but couldn't find anything that works due to limitations in my markup. My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup). <ul> <li> <input type="checkbox" value="1" name="test[]" id="myid1"> <label for="myid1">label1</label> </li> <li> <input type="checkbox" value="2" name="test[]" id="myid2"> <label for="myid2">label1</label> </li> </ul> I need the checkbox to be on the

问题 I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case). In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of

问题 I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle. CSS: div.categoryLinks { margin: 1em 16px; padding: 0 4px; border-width: 1px 0; border-style: solid; border-color: #ece754; background: #f7f5b7; color: #a49f1c; text-align: center; font-size: 1.4em; } div.categoryLinks em { font-size: 0.6em; font-style: normal; vertical-align: middle; } HTML: <div class="categoryLinks"> <em>SECTION:</em> Page One · Page Two · <a href=

问题 I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does? .flex-container { display:flex; align-items:center; justify-content:stretch; } .flex-item { align-self:stretch; } <div class="flex-container"> <div class="flex-item">I want to be vertically centered! But I'm not.</div> </div> BEFORE YOU ANSWER: There seems to be a lot confusion about

问题 I have a row of DIVs for my navigation and I'm trying to vertically center an image with an anchor inside them using only CSS. I tried vertical-align: middle; but that isn't working. I'm sure it has to do with the float:left since all the images are pushed to the left side but when I take it out the divs go crazy. HTML <div class="linkgroup"> <img src="images/homeIcon.png"> <li class="navItem"><a href="somelink.com" class="navLink">HOME</a></li> </div> </ul> CSS .linkgroup{ float: left;

问题 I have a portion of a website I am creating that is as follows: <div id="topbar"> <div id="topbar_left"> <form action="Search" method="POST"> <label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" /> <input type="submit" value="Search" /> </form> </div> <div id="topbar_right"> You are logged in as Username • <a href="LogOut">Log Out</a> </div> <div class="clear"></div> </div> I would like for the text in topbar_right to be vertically

问题 I would like to align the text to bottom in the second cell. The first cell extends to 2 lines, because of insufficent width and that's OK But the text in the second cell is only one line and shows up at the top of the cell. How can I align it to bottom? I tried vertical-align="bottom" text-align="bottom" text-align="end" on row , cell and block levels.. Any of them worked?!? <fo:table font="normal 10 pt Arial, sans-serif" width="100%"> <fo:table-column column-width="40mm"/> <fo:table-column

问题 I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation. I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the