vertical-alignment

CSS vertical-alignment - what am I not understanding?

由 感情迁移 提交于 2019-12-24 02:13:24
问题 I'm messing around with everyone's favorite CSS topic, vertical alignment. I found a little case that makes no sense to me, which probably means I'm failing to understand something about CSS. I have the following HTML (it's for exploration code, so please excuse the inline styles): <div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;"> <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; display:inline-block;

CSS Vertical Float Technique

由 99封情书 提交于 2019-12-24 00:50:02
问题 Is it possible to have a vertical float working by analogy with the horizontal one? In the Html below I'd like the green button to be as it is and the yellow to float to the bottom beyond gray shape edge. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;"> <tr> <td style=

How to bottom align text in WPF RichTextBox

由 烈酒焚心 提交于 2019-12-24 00:43:30
问题 How I can bottom align text in RichTextBox? It seems that control doesn't support it directly. So I am looking for ways to emulate it. Ideally I would have the boundary of the control fixed and end of text aligned with the bottom. 回答1: The text comes from a ScrollViewer named PART_ContentHost inside the default control template for the TextBoxBase which is wrapped by the RichTextBox. You should override the control template and either have the ScrollViewer declare its VerticalAlignment to be

vertical align pseudo element in list navigation

由 自作多情 提交于 2019-12-24 00:25:21
问题 I've created a list style navigation and each hyperlink can be multiple lines, after each hyperlink element I added a pseudo element 'arrow' after, would it be possible to align the pseudo element vertically regardless of the hyperlink height? The requirement would be for this to work in IE8 & above. The Mark-up: <ul> <li> <a href="#"> <h3 class="title">Cover</h3> <p class="subtitle">Lorem ipsum dolor sit</p> </a> </li> <li class="current"> <a href="#"> <h3 class="title">Lorem ipsum dolor sit

Vertical-alignment issues with Helvetica Neue

由 送分小仙女□ 提交于 2019-12-24 00:22:42
问题 This is a minor but persistant annoyance with Helvetica Neue (doesn't happen w Arial) Text that is perfectly vertically aligned will shift downward slightly when any part of the text is bolded. While it's a small shift, it ruins alignment when mixing bold and non-bold text elements side by side. See http://jsfiddle.net/ZZ3m6/7/ for example. Even when explicitly setting line-heights, the shift occurs. How can I stop this? 回答1: My experience is not to even bother with Helvetica Neue. Macs come

Vertical align multiple image with different height

由 孤者浪人 提交于 2019-12-23 21:53:05
问题 I got a Carroussel script which display all the users of the site i'm working on. This carroussel displays the avatar of the users. I try to align verticaly the avatar's but i can't get it right... I also check the other subject on the internet (like http://codepen.io/chriscoyier/pen/oJeAK) , but nothing really match my needs... Here is my CSS code : #author-sorter { padding: 20px 30px; margin-right: 2px; width:900px; } #author-sorter > * { vertical-align: middle; } #author-sorter ul li {

How to vertically center text in a block elment with changing font size?

由 ぃ、小莉子 提交于 2019-12-23 20:51:50
问题 My usual approach to vertically center text is to use line-height equal to the container's height. Thus, the container has height: 60px; line-height: 60px; and the child elements have line-height: 60px; That works. But if you increase the font-size above 1em, that messes it up. Worse, browsers are inconsistent in how they do it! Here's a JSFiddle demo: http://jsfiddle.net/tgv2rx7f/7/ . Notice that in Firefox the big "A." is too close to the top of the container. It doesn't look so bad in the

Vertical middle alignment of image within div? [duplicate]

由 情到浓时终转凉″ 提交于 2019-12-23 20:36:28
问题 This question already has answers here : Closed 7 years ago . Possible Duplicate: vertical alignment of image inside a div OK, this what I'm trying to do : I'm having an empty div (a box), with almost no height. I'm making an AJAX request to load some content into it. Before loading the content, I want to display in a typical "ajax loading" rotating gif. I've managed to : Center the img horizontally (by putting it inside another div with text-align:center; ) What is left : Be able to give

how can I align text/image/links within a grid <div> of the twitter bootstrap css?

由 最后都变了- 提交于 2019-12-23 14:54:01
问题 I am trying to use Twitter's bootstrap CSS framework and within there so far only the grid layout. Now I simply want to align the content of each grid cell <div> to the bottom. I am obviously no CSS buff at all. This is the html: <div class="container"> <div class="row"> <div class="span4"> <a href="index.php"><img src="someprettyhighimage.gif"/></a> </div> <div class="span8"> some text/links that need to be bottom aligned </div> </div </div> </div> I cannot find a way to make the second

Positioning of div inside display:table-cell in IE 10

由 て烟熏妆下的殇ゞ 提交于 2019-12-23 12:15:04
问题 Trying to understand why IE9-10 is choking on something that IE7,8, FF, WK all render as expected. Is there any trick to getting IE 9-10 to correctly respect the inherent height of a 'table cell'. (Important note: due to a variety of reasons I cannot use height:100% on the 'cell' div.) http://jsfiddle.net/swortis/fCn8Y/ HTML: <div class="table"> <div class="row"> <div class="cell"> <div class="wrapper"> <div class="content"></div> </div> </div> </div> </div> CSS: <style> html, body { height:
订阅 vertical-alignment