vertical-alignment

问题 I have a table with one row full of tds. I made them display: inline-block so that they would wrap with the page. I can't seem to make the text inside them vertical-align: middle. How would I accomplish this? Or is display: inline-block not the way to go? Thanks. EDIT Here is the code. Sorry I'm new to posting. <div> <table class="disk-size-table center"> <tr class="disk-size-row"> <!-- <td class="disk-size-td draggable" data-disk-size="500"> 500 GB <!-- I want the 500GB to be vertical align

问题 I have a line of text and a small image, which I am trying to align vertically within the line. My goal is to align the vertical center of the image with the x-height (or half of the height of a capital letter) from the baseline of the text. I can't figure out any way to do this. The closest thing that I know of is: vertical-align: middle; This behavior as it is stated in the CSS 2.1 spec: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the

问题 I would like to vertically center 'design' label as well as '21nov'. <div class="row"> <div class="col-xs-6 col-xs-offset-1"> <a href="/job/52"><span class="jobtitle">designer</span></a> <span class="companyname"> @Subiaco</span> <div class="salary">90.000$ - 100.000$</div> </div> <div class="col-xs-3"> <span class="label label-success">design</span> </div> <div class="col-xs-2"> 21 nov. </div> </div> Current design : http://jsfiddle.net/8FM3n/ Expected design : Any hint ? 回答1: Assuming it

问题 Recently I have been playing around with the anchor tags' css of the page http://nate.fm/articles/ If you assign border around the link Light or Pro-Life vs Pro-Birth and change their font-weight to more than 500 then suddenly the vertical alignment changes from middle to top. Below I have added images showing this: Font Weight 700: Font Weight 500: More to the surprise, this bug disappears for any other font family than Crimson Text . I tried to replicate the bug on local but failed. Could

问题 Suppose you have a two-column layout using Twitter Bootstrap, in which you want to have specific rows vertically aligned with each other: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2>Column 1</h2> <p>Optional content of variable height.</p> <p><strong>Align this vertically...</strong></p> </div> <div class="col-sm-6"> <h2>Column 2</h2> <p><strong>...with this<

问题 I am trying to use the following CSS rules to vertically center aligned content in bootstrap 3 - .center { display:flex; align-items:center !important; background-color:red; text-align:center; } @media ( min-width:768px ) { .center { display:flex; align-items:center !important; background-color:red; text-align:center; } } @media ( min-width: 992px ) { .center { display:flex; align-items:center !important; background-color:red; text-align:center; } } @media ( min-width: 1200px ) { .center {

问题 I want to vertically centre the submenu on this page in between the two lines. http://complete.sanscode.com/Landscape. See the part that says Master Planning | Park... etc. I'd like to use jquery to centre that. Does anyone know how? Edit: The menu can be more than one line. Thanks Jason 回答1: Just set the CSS line-height to a fixed value: http://jsfiddle.net/simevidas/yHJjx/ 回答2: From what I can tell you are wanting to center an element in a fixed height area? You are best off just adding a

问题 I want to put a text input on the same line and height as a submit button. See the JSFiddle. In Chrome this works flawless, but in Firefox the submit button is lower than the text input. How do I fix this. HTML <div id="whois-lookup"> <form id="whois-form"> <input type="text" placeholder="search" id="name-check" /> <input type="submit" name="query" /> </form> </div> And the css #whois-lookup input[type=text] { margin: 0; border: 1px solid #aaa; border-right: 0px; font-size: 1.0em; line-height

问题 I have this code. Despite of being inside a td , and having specified this CSS: .day { text-align: right; padding: 5px; vertical-align: middle; border: 1px solid black; } .day--hole { color: lightgray; } .day--today { background: pink; } <table> <tbody> <tr> <td class="day day--hole">30</td> <td class="day day--hole">31</td> <td class="day">1</td> <td class="day">2</td> <td class="day">3</td> <td class="day">4</td> <td class="day">5</td> </tr> <tr> <td class="day">6</td> <td class="day">7</td

问题 I have a ProgressBar in a ScrollView, and I'd like it to stay centered vertically despite the user scrolling down or up. However, I'm not sure how to accomplish this. Here's the code that I have, simple as it is. I have an indeterminate ProgressBar: <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ocr_scroll_view" android:layout_width="match_parent" android:layout_height="fill_parent"> <RelativeLayout android:id="@+id/image_holder" android:layout_gravity