vertical-alignment

问题 How do I center an <img> in a containing <div> ? The usual margin-left: auto; margin-right: auto; isn't working. The image can be larger than the container, and is scaled either horizontally or vertically by the max-width and max-height . A jsfiddle with the below code: http://jsfiddle.net/9ShGj/1/ HTML: <div class="container"> <img src="http://www.yensa.com/fat/fat-dude10.jpg" /> </div> <div class="container"> <img src="http://oi43.tinypic.com/bje2wn.jpg" /> </div> CSS: .container { width:

问题 I have an inline list of elements, the elements within the list can sometimes be image or text. The image is always the same height as the list, but how can I vertical align text within the list? http://jsfiddle.net/qvuCm/ Note: The mark-up can't be changed. Looking to do this with CSS only, no JavaScript. 回答1: Made the following changes: ul li a img{ display:block; } a { color: #000; font-weight: 700; text-decoration: none; display:table-cell; vertical-align: middle; width:100px; height:80px

问题 Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column? This is my code: <div class="container partners"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px"> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max

问题 Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row. $(document).ready(function(){ $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 10, 200); R.text(5, 100, $(div).find('span').text()) .rotate(-90, true); $(div).find('span').hide(); }); });

问题 Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row. $(document).ready(function(){ $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 10, 200); R.text(5, 100, $(div).find('span').text()) .rotate(-90, true); $(div).find('span').hide(); }); });

问题 Please expand the jsfiddle to see box in action, http://jsfiddle.net/5fp37/. I want the blue border boxes to align side by side, but I dont want to mention a width to the boxes. This fiddle works ok but as soon as I remove the width:400px , both boxes get on top/bottom of each other. Any clue? dont want to specifiy width of any thing. board or box. just a minimum width of box, because ther could be unkown number of boxes. and each would alight side by side Nor want the divs to change position

问题 I'm trying to BOTTOM align an image in a fixed-height block: div { float: left; width: 100px; height: 100px; line-height: 100px; } div img { vertical-align: middle; } ...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible. Edited to add: Can't use tables or background image. Many thanks 回答1: Why can't you just position:relative the division, position:absolute and mess with bottom/left properties? Or toggle it's position to inline-block and play around

问题 I'm using Flexbox to display various content in a panel. At the bottom of each panel is a list of icons. This is easier to visualise in this Codepen Demo And snippet.. * { font-family: sans-serif; } .wrapper { display: flex; align-items: flex-start; width: 500px; background-color: #F9F9F9; padding: 10px; position: relative; } .image { width: 150px; margin-right: 1em; } .row { display: flex; flex-direction: column; flex: 1 0 0; } .more { font-weight: bold; margin-top: 1em; display: flex; flex

问题 I'm using Flexbox to display various content in a panel. At the bottom of each panel is a list of icons. This is easier to visualise in this Codepen Demo And snippet.. * { font-family: sans-serif; } .wrapper { display: flex; align-items: flex-start; width: 500px; background-color: #F9F9F9; padding: 10px; position: relative; } .image { width: 150px; margin-right: 1em; } .row { display: flex; flex-direction: column; flex: 1 0 0; } .more { font-weight: bold; margin-top: 1em; display: flex; flex

问题 I can't get the text div (green box) stuck on the right of the container div (red box). The width of the container is fixed and writing-mode: vertical-lr; is used. I tried many things with vertical-align and text-align . div.container { writing-mode: vertical-lr; border: 2px solid red; padding: 2px; width: 70px; } div.text { border: 2px solid green; transform: rotate(180deg); } <div class="container"> <div class="text">I want to touch the right border of the container!</div> </div> 回答1: I