vertical-alignment

Vertical-align middle with display table-cell not working on images

由 旧街凉风 提交于 2019-12-08 14:47:03
问题 I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why? HTML: <div> <img src="http://jsfiddle.net/img/logo.png"/> </div> <div> <span> text </span> </div> CSS: div{ width:200px; height:200px; background-color:red; display:table; margin:10px; } img, span{ display:table-cell; vertical-align:middle; } http://jsfiddle.net/9uD8M/ I created a fiddle aswell 回答1: Put border: 1px solid black

How do I vertically align a content div between a header and footer div?

由 若如初见. 提交于 2019-12-08 14:29:26
I have three rows of primary divs in my template. I have a header, a content wrapper, and a footer. The header butts right up against the top and the footer against the bottom. I have a content wrapper div in between the two. I basically want to center the content wrapper vertically within the two divs. The content div will always be a dynamic height, so the line-height method won't work for me. What would be the best method for me to use for this? Vertically centering content Without using JavaScript, there's a limited number of ways to vertically center dynamic content: HTML tables CSS

How to scale height of views and postion of the views relative to the screen size using AutoLayout [closed]

由 ↘锁芯ラ 提交于 2019-12-08 06:38:18
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 2 years ago . Using Autolayout what is the best way to keep a view's relative position and scale to each screen size? For example there are drastic differences between the 4s and iPad Pro. What type of constraints and thought processes should I be using? The views being scaled may each have

SWT Section reserves too much vertical space when using a custom row layout for its children

由 ℡╲_俬逩灬. 提交于 2019-12-08 06:24:30
问题 I use a GridLayout with one column inside a Section . There are three "rows" in the grid, having a white background. I would like the Section to grab horizontal space but only as much vertical space as needed : Each row uses a custom row layout and has two children. Furthermore, that row layout has two states: a) show on a single line (if total width is large enough) b) show second child (red) on an extra line (if total width of window is too small for both children) For both states I would

Center Align Text with Select Option

由 人走茶凉 提交于 2019-12-08 05:34:28
问题 How to vertically Align a text with a Select Option. Link: http://mink7.com/projects/test/dashboard.html 回答1: Use labels as in this example fiddle. Markup: <form action=""> <label for="startDate">Start Date:</label> <select id="startDate"> <option value="Mar 04">Mar 04</option> </select> <label for="endDate">End Date:</label> <select id="endDate"> <option value="Aug 04">Aug 04</option> </select> </form> When this does not work, then there are some inherited styles interfering and try to set

How to vertically center anchor tag text inside of a ul li

由 放肆的年华 提交于 2019-12-08 05:04:39
问题 Here is my html: <ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;"> <li><a href="/path1" class="one">1st button</a></li> <li><a href="/path2" class="one">2nd button</a></li> <li><a href="/path3" class="one">3rd button</a></li> </ul> I also attached an image if what I currently have. I tried adding display: table-cell; vertical-align: middle; to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class

Vertical align font awesome icon with text within <li>

由 。_饼干妹妹 提交于 2019-12-08 03:08:27
问题 I have a list that uses font awesome, hence its class is fa-ul : <ul class='fa-ul'> <li class='dept'><i class='fa-li fa fa-stop'></i><span>Management</span></li> <li class='dept'><i class='fa-li fa fa-stop'></i><span>Something else</span></li> </ul> The associated CSS is : li { font-size : 2em; margin: 1em 0; } I'd like the text and the stop-square to be vertically aligned. So far, it is not the case : See screenshot: I've tried to wrap the fa-icon and the text in a <div> element with

css how to make <a> text align bottom?

由 不羁的心 提交于 2019-12-08 03:06:18
问题 How how to make <a> text align bottom? I have added height = line-height , and vertical-align:bottom; but the text still in the middle of the div. How to do? Thanks Test in http://jsfiddle.net/BanAz/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #layer{width:198px;height:48px;line-height:48px;border:1px #000 solid;vertical-align:bottom;} #layer a{text-decoration:none;} </style> <

When to use position absolute vs position relative when vertically aligning with css

由 感情迁移 提交于 2019-12-07 21:56:39
问题 Originally I followed this article which used position: relative on the child element: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://codepen.io/anon/pen/KpWKWg But I couldn't get it to work on my code for the life of me: http://jsfiddle.net/ge77ma0e/ Then I found these instructions which use position: absolute on the child element: https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown http://codepen.io/chriscoyier/pen/lpema And when I

How to vertically align text across browsers

由 人盡茶涼 提交于 2019-12-07 19:17:59
问题 Please note that I have been through the existing links on this topic and none seem to help in my case. All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome. Please open the following link in Firefox (v12) and Chrome (v19). http://jsfiddle.net/UQ4D5/ You will notice that it is shifted towards the top in Firefox but is
订阅 vertical-alignment