vertical-alignment

问题 I have a code : http://www.bootply.com/8uA4jyGZKB I would like to vertically center the text and icons at the right of the picture. How can I vertically center the contents of the col-md-10 div ? 回答1: You can use CSS Flexbox . Make the .row a flex container and use align-items property to vertically center the content. Just like: .row { display: flex; align-items: center; } Have a look at the snippet below ( use full screen for preview ): body { padding-top: 50px; } .row { display: flex;

问题 I see the code vertical-align: -0.125em; , and think about what's the difference between it and vertical-align:middle ? 回答1: vertical-align:middle means Aligns the middle of the element with the baseline plus half the x-height of the parent So you need to find the middle of your element, the baseline and half the x-height (defined by the ex unit). Here is an example: .box { font-size:50px; background: linear-gradient(green,green) 0 46px/100% 2px no-repeat; } .box > span { display:inline-block

问题 Is there a simple way to align on the decimal dot a column of floats? In other words, I would like an output like the one of (vertical bars '|' are there only for clarity purpose) (format t "~{|~16,5f|~%~}" '(798573.467 434.543543 2.435 34443.5)) which is | 798573.44000| | 434.54355| | 2.43500| | 34443.50000| but with trailing spaces instead of zeros, as follows: | 798573.44 | | 434.54355| | 2.435 | | 34443.5 | 回答1: I do not think that this can easily be done with format 's inbuilt control

问题 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? 回答1: Vertically centering content Without

问题 (I asked a similar question here and found a working solution under certain circumstances, however the parameters for this design quandary have changed, so I've decided to start a new thread) I'm trying to find a way-- either via pure css or with the help of javascript-- to vertically align a block of multi-line text alongside an image, as depicted here. As shown in the demo, the text block will be smaller in height than that of the image, so I'd like it to float in the middle (as is the

问题 (I asked a similar question here and found a working solution under certain circumstances, however the parameters for this design quandary have changed, so I've decided to start a new thread) I'm trying to find a way-- either via pure css or with the help of javascript-- to vertically align a block of multi-line text alongside an image, as depicted here. As shown in the demo, the text block will be smaller in height than that of the image, so I'd like it to float in the middle (as is the

问题 I have the this piece of code here... <div class="pics2"> <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;"> // this div is generated via jQuery Plugin <div style="display:table-cell; vertical-align:middle; height:200px;"> <img src="upload/<?php echo $array['image5'] ?>" width="225" /> </div> </div> </div> and here is the CSS .pics2 { padding: 0; margin-left:20px auto; margin-right:20px auto; width:225px; height:200px;

问题 I'm trying to display on one line: a H1 element aligned to the left of the containing box several "buttons" (A elements here) aligned to the right of the containing box all being on the same baseline Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc. <div id="block1"> <h1>What a great title</h1> <a href="javascript:void(0)">This link can kill you</a> <a href="javascript:void(0)">Click if you dare

问题 I've got a simple donut chart in d3.js, which will only be used to compare 2 or 3 items. http://jsfiddle.net/Ltqu2/ I want to combine the legend and values as text in the center of the chart. In the current implementation, the text alignment is ok for 3 items, but for 2 items it doesn't adjust. The alignment is somewhat hard coded: var l = svg.selectAll('.legend') .data(data) .enter().append('g') .attr('class', 'legend'); l.append('text') .attr('x', 0) .attr('y', function(d, i) { return i *

问题 I'm trying to get the text to be on the right side and vertically center aligned with the image. How can I do that? My current code: <div style="display: table;"> <div style="display: table-cell;"><img src="//dummyimage.com/100"></div> <div style="display: table-cell;">text</div> </div> 回答1: use CSS3 Flexible Box Layout: from the documentation: providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen