vertical-alignment

问题 Using Bootstrap, I am attempting to vertically align text and an image in two spans (span 4 and span8) with one image and text within the same span (span8). The image is currently floated left. The image will hide/unhide depending upon the width of the browser window so the text will take up the space of the hidden image. That part works. But vertically aligning the text with the image does not and I have looked at, and tried, about every 'solution' I can find but none work for me. The total

问题 I use GraphViz with the following dot file: digraph G { rankdir=LR; subgraph commits { "5c071a6b2c" -> "968bda3251" -> "9754d40473" -> "9e59700d33" -> "2a3242efa4"; } subgraph annotations { "V1.0" [shape=box]; "br/HEAD" [shape=box]; "V1.0" -> "9e59700d33" [weight=0]; "br/HEAD" -> "2a3242efa4" [weight=0]; } } It give me something like that: But I want something like that: V1.0 br/HEAD | | \/ \/ 5c071a6b2c -> 968bda3251 -> 9754d40473 -> 9e59700d33 -> 2a3242efa4 How can I do that? For your help,

问题 I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box? div { width: 100px; height: 100px; background: #eee; color: #333; text-align: center; line-height: 100px; vertical-align: text-bottom; } <div>FoxRox</div> 回答1: Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem

问题 I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box? div { width: 100px; height: 100px; background: #eee; color: #333; text-align: center; line-height: 100px; vertical-align: text-bottom; } <div>FoxRox</div> 回答1: Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem

问题 I have a vertical navbar. Now, this navbar is supposed to have drop down menus. The only problem for me is, I am unable to make it so that the drop down menus are to the side of the menu. I have the HTML and CSS code on jsFiddle here: http://jsfiddle.net/maxkoenig/ZYUeX/ Here it is if you don't want to go on the website: HTML: <div id="wrap"> <ul class="navbar"> <li><a href="/index.php">Home</a></li> <li><a href="/boattypes/featureboats.php">Boat Types</a> <ul> <li><a href="/boattypes/sprint

问题 I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle . I'm really happy with the results of vertical alignment, but: I don't know the width of these 3 divs, I want one of them to be on the very right side of div container (minus padding of course), float: right doesn't work with display: table-cell . Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if

问题 Short story: jsfiddle here. The behavior is consistently wrong in Chrome 21, Firefox 15 and IE9, which makes me think I'm misunderstanding something about the CSS spec. Longer story: I want to center an image vertically using line-height. I've set the height of the image container equal to the line-height, I've reset margins, paddings and borders for all elements, yet the image is 2 pixels below where it should be. This happens whether the image is smaller than the container, or larger than

问题 I would like to have a giant progressbar which is vertically aligned inside a CSS grid. The problem is, vertical alignment inside CSS grid is not working for me. I tried on Firefox, and also on Chrome. I tried vertical-align: middle , but it is not working. I have put a Flexbox inside the grid item, but still it is not working. Here is my minimal example: .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr)

问题 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } .image { width: 20%; height: 100%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; } .navigation { width: 79%; height: 100%; float: right; text-align: right; box-sizing: border-box; border-style: solid; border-width: 1px; } ul { height: 100%; font-size: 0; box-sizing: border-box

问题 Consider the following example: (live demo here) HTML: <a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a> CSS: a { display: block; background: #000; line-height: 40px; } img { vertical-align: middle; } The output is: Why the image is not vertically centered ? How could I fix that so it will work in all major browsers ? Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown. 回答1: You can use