vertical-alignment

How to vertically align text on the right of a table to the middle of the table?

由 余生长醉 提交于 2019-12-11 03:07:34
问题 I have created an 'inline' table using this extremely useful Stack Overflow Link, made to look like a fraction. A picture of it is put below: Now all works fine, but look at what happens when content next to it is placed in: The plus sign aligns itself with the top of the table. So I was wondering, is there a way to align it to the middle of the table(near the vinculum or middle line)? EDIT: Due to user requests, this is the code for my table and also the plus sign: <table style="border

Vertical Align Middle an image in an a tag in a div

由 梦想的初衷 提交于 2019-12-11 01:57:27
问题 This has probably been done before but I can't find a solution for my specific case. I have the following: <div class="holder" style="height:260px;width:260px;"> <a href="#"><img src="image.jpg" /></a> </div> How can I get the image to align into the middle of the div? 回答1: Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image. You can prevent this with img{ display:[inline-

Aligning items to the bottom using flex

由 大兔子大兔子 提交于 2019-12-11 00:26:58
问题 I'm trying to use flex to align the items inside the parent to the bottom of parent, but it's not working for some reason. What am I doing wrong? #login { border: 1px solid red; height: 50px; display: flex; } .login { border-radius: 5px; padding: 5px; align-self: flex-end; } #loginButton { border-radius: 5px; padding: 7.5px; background-color: black; color: white; cursor: pointer; } <div id = 'login'> <form method = 'POST' action = 'login.php'> <input class = 'login' type = 'text' name =

inline-box with image vertical-align:middle with parent box

由 ℡╲_俬逩灬. 提交于 2019-12-10 22:38:16
问题 Please run the demo: * { margin:0; padding:0; } .body { font-family:Microsoft Yahei; font-size:16px; background-color:lightblue; height: 200px; width:200px; line-height:2; } .body span { background-color:pink; } .body img { width:50px; height:50px; } .body .img-wrapper { background-color:orange; } .body .img-wrapper { vertical-align:middle; } <div class="body"> <span class="wrapper"> words-g words-g words-g <span class="img-wrapper"> <img src="https://avatars3.githubusercontent.com/u/23273077

Flexbox vertical align specific content within a wrapper?

由 拥有回忆 提交于 2019-12-10 21:07:58
问题 My CMS has a rather rigid setup with 2 columns with headers and content, as below: .wrapper { overflow: auto; border: 1px solid #ccc; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .left, .right { float: left; width: 45%; padding: 5px; } <div class="wrapper"> <div class="left"> <h3>Title (should be aligned to top)</h3> <div class="content"> left<br> left<br>

How to align an inline-block horizontally and vertically

由 狂风中的少年 提交于 2019-12-10 20:41:44
问题 What is the best/cleanest using CSS to align the #dates div to the right side of the header, and vertically in the middle. I tried float: right , but that does not allow the vertical-align . I want to avoid using floats, so I am using inline-block , and using relative positioning. Is there a more correct approach? I do not like the fact that I have to do a top of 30px, and using trial and error until it centers. <div id="header"> <a id="logo" href="~/" runat="server"> <img src="Images

How do I vertically center the text within a flex element?

由 孤街醉人 提交于 2019-12-10 20:34:56
问题 This question was migrated from Super User because it can be answered on Stack Overflow. Migrated 6 years ago . Is there a special way to vertically center text in an element using flexboxes (or other pure CSS)? Fiddle: http://jsfiddle.net/WK_of_Angmar/JZZWg/ <body> <div id="main"> <section id="a">Test1</section> <section id="b">Test2</section> </div> #a { flex: 1 0 auto; } #b { flex: 0 0 auto; min-height: 3em; background-color: yellow; } #a { background-color: blue; } #main { display: flex;

How to vertically and horizontally center a div of unknown height

由 不打扰是莪最后的温柔 提交于 2019-12-10 19:53:26
问题 I tried using the flexbox method, table method, and some other methods for vertically centering a div of unknown height, but my div is not getting centered correctly. I want the width of the centered div to be 50% of the window width or have a min-width of 200px. .content { background-color: violet; min-width: 200px; width: 50%; margin-left: auto; margin-right: auto; box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1); } .outer-container { display: table; width: 100%; background-color: violet; }

Vertically Align Multi-line Text in a Div Sitting Next to Floated Sibling

由 家住魔仙堡 提交于 2019-12-10 17:42:53
问题 I've got two sibling divs. One takes up a width of 70% of the parent and is floated to the left. It has a clip-path to create an irregular polygon. The sibling div has a width of 100% of the parent. I've put a shape-outside property on the floated div to allow the text in the sibling to wrap in a way that follows the diagonal of the polygon. My issue that I'm having trouble solving is that the text in the non-floated sibling is dynamic and could either be single or multi-line. I would like to

Popup Control VerticalAlignment doesn't “catch”

由 霸气de小男生 提交于 2019-12-10 15:32:21
问题 I'm using a Popup control, and for some reason its vertical alignment doesn't work as I expect. This is the XAML I have: <Grid Width="100" Height="30" > <TextBox Text="Hello" /> <Popup IsOpen="True" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" > <Button Content="Hello" /> </Popup> </Grid> I expected that the Popup's Width would be 100px, the same as it's parent Grid. However, the Button inside the popup behaves as if its HorizontalAlignment is Left, i.e., the Button's width is
订阅 vertical-alignment