vertical-alignment

问题 I have a h2 tag that has a background image as an icon. I want to align the text vertically within the h2 tag but it doesn't work. I have tried using the display: table-cell; but that hasn't worked either. The text may also crossover onto two lines. HTML: <ul class="FeatureRow"> <li><a href="#"><span><h2 class="SpeechBg">Need some help?</h2><p>Feel free to get in contact with us</p></span></a></li> <li><a href="#"><span><h2 class="PinBg">Great locations!</h2></span></a></li> <li><a href="#">

问题 Say I have a like so: <table style="margin-left: auto; margin-right: auto;"> <tr> <td> </td> </tr> </table> The margin-* attributes instruct the table to center itself within its parent element. Is there a similar way to center the element vertically? 回答1: This is a very often requested thing to do. There's no simple way to do vertical alignment. There's the vertical-align attribute, but it's for line-alignment of an inline element. Check out this link for different ways to do vertical

问题 I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help! I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned. I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a

问题 Hi I have Bootstrap modal. I am not getting hoe to make vertically center aligned? $('#sectionAjaxLoader').modal('show'); <section class="modal" id="sectionAjaxLoader" data-keyboard="false" data-backdrop="static"> <img src='../../Images/ajax_loader.gif' alt="Please Wait..." /> </section> Any ideas how to implement this? 回答1: Use like this .modal { text-align: center; } .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } .modal-dialog { display: inline

问题 This is what Ihave so far: http://jsfiddle.net/yisera/2aVpD/ There's a div I need to center vertically inside the .jumbotron-special container. I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray. Any ideas how can I center it to the

问题 I need to position several div rows to the bottom of a container, similar to the image here: My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom

问题 I am not quite sure how to say what I want but I am going to try. I want to vertically align three different elements, all three wrapped in individual divs. Currently this is my code: .service_info { margin-top: 45px; clear: both; background-color: #ffffff; font-family: "source-sans-pro", sans-serif; } .title_text_serviceinfo { margin-top: 85px; margin-left: 60px; padding-bottom: 20px; color: #333132; font-size: 24px; font-family: "source-sans-pro", sans-serif; } .service_info_times { margin

问题 I have 1 parent table-cell .t and 2 child blocks .ch1 and .ch2 : HTML: <div class="t"> <div class="ch1">1</div> <div class="ch2">2</div> </div> CSS: .t { display: table-cell; background-color:green; height:200px; width:200px; } .ch1 { background-color:blue; display: block; } .ch2 { background-color:red; display: block; } Is it possible to push .ch2 to bottom, but left .ch1 on top (if use vertical-align: bottom; of .t it will push both blocks to bottom) JSFiddle: https://jsfiddle.net/hvz4cn69/

问题 On codepen I'm testing some frame classes on span button input and an empty span . In order to ensure the empty span matches the height of the others I'm using calc math give it min-height but this calculation seems to require knowing line-height . Is there a way to ensure the min-height without needing to know the line-height ? Also I don't understand why the vertical-align middle aligns the empty one with the others while baseline doesn't. If anyone can explain that or suggest alternative

问题 This is a two part problem. Solving it for Firefox breaks IE6, and solving it for IE6 breaks Firefox. WebKit works fine. This demonstrates the problem in Firefox: http://jsfiddle.net/UpZca/2/ "Import Submission" link is slightly higher than "Export Submission", which is a problem. IE6 works fine at this point - the alignment is correct. I know that when using ' inline-block ', vertical alignment issues can be fixed with vertical-align:top , so I tried that first. You can see that it fixes the