vertical-alignment

How to vertically align into the center of the content of a div with defined width/height?

由 本秂侑毒 提交于 2019-12-17 02:58:26
问题 What would be the correct method to vertically center any content in a defined width/height div . In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell ) Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto . 回答1: I have researched this a little and from what I have

How to display list items as columns?

由 纵饮孤独 提交于 2019-12-17 02:44:24
问题 I'm trying to build my first responsive layout. I want to display list items in a vertical line, depending on width. <div style="height:800px;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> 1 5 2 6 3 7 4 If the browser gets resized, I want it to become 1 4 7 2 5 3 6 Can someone help me? I've been trying for hours and I can't get anything. I've tried using tables but I can't do it like that either. 回答1: This can be done using CSS3 columns quite

Why is auto-fill property of CSS Grid not working in column direction

由 感情迁移 提交于 2019-12-14 03:54:00
问题 I am practicing auto-fill property with rows, however, it is not doing what I desire. I want to create rows with height minmax(140px, 200px) , but instead get one row with 200px height and the rest are 18px. Why is it happening? body, html { height: 100%; margin: 0; } .wrapper { display: grid; grid-template-rows: repeat(auto-fill, minmax(140px, 200px)); } .wrapper>div:nth-child(odd) { background-color: red; } <div class="wrapper"> <div class="one"> 1 </div> <div class="one"> 1 </div> <div

Spacing differences between IE7 and Firefox/Opera/Chrome

由 萝らか妹 提交于 2019-12-14 03:51:45
问题 I have an ongoing issue with the amount of vertical space of unordered lists in IE7 vs. Firefox/Chrome/Opera and I can't seem to find a solution out there. In IE7, the space is less and what I would like to see. In Firefox, Chrome, and Opera, the space between is about twice as much. I can't account for any of the spacing issues in my code or page. On my page, the code looks like this: <!--BEGIN SIDEBOX--> <div id="sidebox_new"> <div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>

How to make vertical tabs with React

由 你离开我真会死。 提交于 2019-12-14 02:15:59
问题 Can someone provide me with a way to create vertical tabs using React? I experimented with various npm packages like react-web-tabs,reactstrap and react-bootstrap.The last two only had examples for horizontal tabs.React-web-tabs has a vertical tab example in their docs but it doesn't work. import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs'; class NewNavigation extends React.Component{ render(){ return( <Tabs defaultTab="vertical-tab-one" vertical> <TabList> <Tab tabFor="vertical

SwiftUI vertically misaligned text

由 爷，独闯天下 提交于 2019-12-13 17:42:40
问题 I have some vertically misaligned text and I don't know why... The code: struct IBANInputView: View { @State var securityDigits = "" @State var bankCode = "" @State var accountNumber = "" var body: some View { HStack { Button(action: onCountryButtonTapped, label: { Text("NL") .foregroundColor(Color.purple) }) TextField("00", text: $securityDigits) .fixedSize() TextField("BANK", text: $bankCode) .fixedSize() TextField("0000 0000 00", text: $accountNumber) } } func onCountryButtonTapped() {

Why doesn't vertical-align: middle work with input elements in a table-cell?

由 。_饼干妹妹 提交于 2019-12-13 16:23:10
问题 Here is my code: * { vertical-align: top; margin: 0; } td { vertical-align: middle; border: 1px solid red; } td:nth-child(1) { line-height: 3em; } td:nth-child(2) { line-height: 4em; } td:nth-child(3) { line-height: 0.1em; } p, input { outline: 1px solid green; } <table> <tr> <td> <p> Some vertically centered text. </p> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> </table> As one can see, the p is neatly vertically centered, as well as the input with line-height:

List Items Middle Vertically Aligned

由 假装没事ソ 提交于 2019-12-13 12:24:46
问题 I have the following HTML and CSS that creates a list, where the list items have a min-height set. I would like for the contents of the list items to be vertically aligned in the middle instead of the top if there is not enough content to fill the entire height. How the heck do I pull this off? <html> <head> <style type="text/css"> ul { width : 300px; list-style-type: none; } li { min-height : 45px; vertical-align : middle; border-bottom : 1px black solid; } </style> <head> <body> <ul> <li

Horizontal ScrollView in fragment Android

由 旧时模样 提交于 2019-12-13 10:38:00
问题 I would like to make my ScrollView filling out the full layout of a fragment and scrolling horizontally, not vertically. How can I achieve that?! Like the album covers Thanks 回答1: Its not vertically, it is horizontally <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content">

Bootstrap 3.2 vertical align image next to text without knowing height

由 别等时光非礼了梦想. 提交于 2019-12-13 07:06:10
问题 I'm using bootstrap 3.2 and I'm trying to vertically align an image inside a div next to some text in the div next to it all using CSS. The image has the img-response CSS class so it's height can change as can the height of the text (because there are different lengths of text). I've put together a quick sample http://www.bootply.com/MjLj4d5HET I'm yet to find a solutions that works 100% of the time and I've had a good look around. I've tried display: table-cell; vertical-align: middle; float
订阅 vertical-alignment