vertical-alignment

问题 I thought I knew my way around CSS, but I needed to explain something to someone just now and I found I couldn't. My question basically boils down to: why is vertical-align:baseline ignored when there are other alignments in the same line? Example: if the second span has vertical-align:bottom , the first span's vertical alignment is ignored if it is baseline ; it behaves as if it has bottom too. span:first-child {vertical-align:baseline} span:last-child {font-size:3em; vertical-align:bottom;}

问题 I want to have 5 lines for the height of the text area. I am using the following code. <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines="5" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" /> The text area looks fine, but the problem is that the cursor is blinking in the middle of the text field. I want it to blink at first line, at the first character of the text field. 回答1:

问题 I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case. <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> Result: Expectation: Please suggest how can I achieve that. Jsfiddle 回答1: First of all note that vertical-align is

问题 I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case. <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> Result: Expectation: Please suggest how can I achieve that. Jsfiddle 回答1: First of all note that vertical-align is

问题 <div class="col-md-4"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x blue"></i> <i class="fa fa-wifi fa-stack-1x white"></i> </span> <h4 class="blue">Free wifi</h4> </div> How can I display h4 element on the right of the icon and vertically aligned? Should I float left the span ? 回答1: One of the ways would be to use inline-block display and middle align it - see demo below: .wrapper > * { display: inline-block; vertical-align: middle; } .blue { color: blue; } .white { color

问题 I have 4 blocks with a title, description and a button. I want to keep Title and Description aligned on top, and the Button to be aligned on bottom no matter how long the description or title is. I also need to keep the same HTML structure. Sample picture of what I actually need: Can somebody figure it out? I didn't find a fix on internet so far. /* FLEXBOX RELATED */ .grid { display: flex; justify-content: space-between; flex-flow: row wrap; } .block { flex: 0 24%; display: flex; }

问题 I have 4 blocks with a title, description and a button. I want to keep Title and Description aligned on top, and the Button to be aligned on bottom no matter how long the description or title is. I also need to keep the same HTML structure. Sample picture of what I actually need: Can somebody figure it out? I didn't find a fix on internet so far. /* FLEXBOX RELATED */ .grid { display: flex; justify-content: space-between; flex-flow: row wrap; } .block { flex: 0 24%; display: flex; }

问题 I have a div that contains an image and a p tag (seen below). I want to align the image in the middle of the div vertically depending on how many lines the paragraph is. Vertical-align doesn't work. I am using JavaScript right now to figure out how much to add to margin-top, but would rather use CSS. Any ideas? <div> <img> <p>Multi-line</p> </div> 回答1: Try setting the line-height attribute of the p element to the height of the image, eg: div p { line-height: 18px; } Edit: Just realised I

问题 I have a sort of column display, but the end two column's seem to not be aligning correctly. This is the code I have at the moment: Console.WriteLine("Customer name " + "sales " + "fee to be paid " + "70% value " + "30% value"); for (int DisplayPos = 0; DisplayPos < LineNum; DisplayPos = DisplayPos + 1) { seventy_percent_value = ((fee_payable[DisplayPos] / 10.0) * 7); thirty_percent_value = ((fee_payable[DisplayPos] / 10.0) * 3); Console.WriteLine(customer[DisplayPos] + " " + sales_figures

问题 I have a (horizontally) centered outer div containing two elements of unknown width: <div style='width:800px; margin:0 auto'> <div style='float:left'>...</div> <div style='float:right'>...</div> </div> Both floats are top-aligned by default, and are of varying/unknown and different heights. Is there any way to make them vertically centered? I eventually made the outer div display: table and the inner divs display: table-cell; vertical-align: middle; text-align: left/right; but I'm just