vertical-alignment | 易学教程

vertical-align of element not working

阅读更多关于 vertical-align of element not working

问题 What I'm trying to achieve is a set of elements (boxes) with a link inside. This link should be on the bottom right, but the vertical-align property is not working jsFiddle: http://jsfiddle.net/4JMav/ HTML <ul> <li><a href="#">TEST 1</a></li> <li><a href="#">TEST 2</a></li> <li><a href="#">TEST 3</a></li> <li><a href="#">TEST 4</a></li> <li><a href="#">TEST 5</a></li> <li><a href="#">TEST 6</a></li> <li><a href="#">TEST 7</a></li> </ul> CSS ul li { display: inline-table; width: 100px; height:

align-middle question

阅读更多关于 align-middle question

问题 What is my misunderstanding about the way that vertical-align:middle; works? I have posted (http://jsfiddle.net/D6RwZ/) some code which I would expect to vertically align a red rectangle in a blue rectangle, but it doesn't look like that. 回答1: Vertical-align only works on inline images and display: table-cell. I've used this solution a few times and it works quite well but takes some work. If you're working with fixed size elements position absolute is by far the simplest. Dynamic sized

Center individual letters visually regardless of whether they are capital or lowercase

阅读更多关于 Center individual letters visually regardless of whether they are capital or lowercase

问题 So I need to make circles that each have a single letter in them and I'm looking to center the letters. There is however a difference in how they get centered when I use letters with different sizes, in this case the lowercase q and the capital A (just an example, it could be any letter): span { align-items: center; display: flex; font-family: sans-serif; justify-content: center; border-radius: 50%; height: 30px; width: 30px; border: 1px solid black; float: left; } <span>q</span> <span>A<

How to align bootstrap navbar to bottom of div

阅读更多关于 How to align bootstrap navbar to bottom of div

问题 I have a basic bootstrap based layout I'm working on. I placed a logo image in the navbar brand element. The logo is roughly 140px high. I then have a navbar-right menu element that I would like to anchor to the bottom of the navbar itself. I've experimented with vertical-align on the navbar-right but it doesn't have any affect. Can anyone explain how to achieve this? This is the basic layout code:  <nav class="navbar navbar-default navbar-fixed-top"> <div class=

Vertical centering of div without Javascript when div's height isn't fixed

阅读更多关于 Vertical centering of div without Javascript when div's height isn't fixed

问题 I would like to vertical center a div without JavaScript when its height isn't fixed . I found here one idea. I wonder if there are other solutions to this problem. 回答1: This works: Here's link: http://jsbin.com/uvodop/2/edit See how it's vertically aligned within the box. Height as well isn't fixed. Hope it answers your question. <html> <head> <title>HTML Div vertical align using CSS</title> <style type="text/css"> .outerDiv { border: solid 1px #000000; width: 300px; padding: 5px 2px 5px 2px

Table item vertical-alignment change when adding control inside TD

阅读更多关于 Table item vertical-alignment change when adding control inside TD

问题 I have been wondering about this. Why does the alignment of the td gets affected when placing controls inside it. For example. <tr> <td>Row 1</td> <td> <input type="text" /> <input type="button" value="Select" /> </td> <td>Selected Value 1</td> </tr> <tr> <td>Row 2</td> <td colspan="2"> <input type="text" /> <input type="button" value="Select" /> Selected Value 2 </td> </tr> The " Row 1 " text is aligned with " Selected Value 1 ". However, the text " Selected Value 2 " is slightly down and

Vertical-Align a DIV

阅读更多关于 Vertical-Align a DIV

问题 This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ : <div class="navigation"> <a href="<?echo $site;?><?echo$prevs['id']?>" class="prev" title="Previous Like"></a> <? if($nexts['id'] == ''){ ?> <? }else{ ?> <a href="<?echo $site;?><?echo$nexts['id']?>" class="next" title="Next Like"></a> <? } ?> </div> I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either. Here

How do I push down control

阅读更多关于 How do I push down control

问题 I have a label with variable-length text and a progressBar below to it. I want to keep a space between that label and the progressBar, so depending to label's text(which is wrapped) the progressBar should be pushed down, always keeping the space between them. How should I do that? I tried AutoSize = true and AutoSizeMode = GrowAndShrink but it didn't changed anything. Example: --------------------------- | for example the label's | | text might be something | | like this, with a lot of | | of

Error css: vertical align in td with input text and image

阅读更多关于 Error css: vertical align in td with input text and image

问题 I have a table with a cell with 2 items (input text and image). I try to align them vertically but it does not work. I try use vertical-align:middle , margin top, padding, try set height:100%, etc... The code is simply: <table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;"> <tr> <td class="cabeceraDG"> Origen</td><td class="cabeceraDG"> Centro</td><td class="cabeceraDG"> Usuario</td> </tr><tr style="white-space:nowrap;"> <td class=

WPF Accordion VerticalAlignment bug

阅读更多关于 WPF Accordion VerticalAlignment bug

问题 Using the Accordion control from the latest WPF toolkit i came across this issue. When an accordion control has its VerticalAlignment set to 'Stretch' the AccordionItems contained within it will no longer expand if the SelectionMode is set to 'One'. If the selection mode is set to 'ZeroOrOne' you get expansion after several attempts at clicking. If it is set to 'ZeroOrMore' some really funky stuff happens where accordion items go missing off the bottom of the screen! Anyone found a solution