centering

What's the difference between margin:auto and justify-content / align-items center?

由 旧街凉风 提交于 2019-11-28 13:35:55
To center both horizontally and vertically simultaneously, there are two simple options: First .outer { display:flex; } .inner { margin:auto; } Second .outer { display: flex; justify-content: center; align-items: center; } What's the difference? In what situations would we use one over the other? In your first example... .outer { display: flex; } .inner { margin: auto; } ... the auto margin applies only to the flex item and centers that one flex item within the container. In your second example... .outer { display: flex; justify-content: center; align-items: center; } You are centering items

How to CenterParent a non-modal form

由 北城余情 提交于 2019-11-28 11:54:33
I have a non-modal child form which opens up from a parent form. I need to center the child form to its parent form. I have set property of child form to CenterParent and tried this: Form2 f = new Form2(); f.Show(this); but to no avail. This works with modal form, but not so with non-modal forms. Any simple solution, or need I go through all that mathematical calculation to fix its position to center? I'm afraid StartPosition.CenterParent is only good for modal dialogs ( .ShowDialog ). You'll have to set the location manually as such: Form f2 = new Form(); f2.StartPosition = FormStartPosition

Centering my navigation menu links

由 杀马特。学长 韩版系。学妹 提交于 2019-11-28 11:52:34
问题 I just can't seem to figure this out. I've tried text-align: center; , display: inline-block and more but I just cant figure out how to center my navigation within the #menu-bottom-nav. CSS #menu-bottom-nav { width: 600px; height: 70px; margin: 0px auto;} #menu-bottom-nav li { list-style-type: none; float: left; margin-right: 20px;} Any help is appreciated. 回答1: Try this out: <!DOCTYPE> <html> <head> <title>Test</title> <style type="text/css"> #menu-bottom-nav { margin: 0; padding: 0; width:

Scrollbar shifts content

由 蹲街弑〆低调 提交于 2019-11-28 11:12:28
I have: I have several web pages both with this outline: <body> <div id="container"> CONTENT </div> </body> with the CSS: body{ color:#000000; background-color:#FFFFFF; background-image: url(background.jpg); background-repeat: repeat-x; font-family: verdana; letter-spacing: 1px; } #container{ margin-left:auto; margin-right:auto; margin-top:5px; width: 700px; } Problem: All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit. From what I understand a

How to position child div to the center of every parents div using position absolute in css [duplicate]

由 我只是一个虾纸丫 提交于 2019-11-28 10:37:55
问题 This question already has an answer here: How to center absolutely positioned element in div? 33 answers I'm having difficulty on positioning child div's on every parents div. Here's the css code: .mainDiv { height:500px; position: relative; } .mainDiv .parent1 { height: 250px; background-color: blue; top: 50px; position: relative; } .mainDiv .parent2 { height: 250px; background-color: yellow; position: relative; } .mainDiv .parent1 .sub1 { width: 100px; height: 100px; background-color: green

How can I center Graphics.drawString() in Java?

由 僤鯓⒐⒋嵵緔 提交于 2019-11-28 09:37:53
I'm currently working on the menu system for my Java game, and I wonder how I can center the text from Graphics.drawString() , so that if I want to draw a text whose center point is at X: 50 and Y: 50 , and the text is 30 pixels wide and 10 pixels tall, the text will start at X: 35 and Y: 45 . Can I determine the width of the text before I draw it? Then it would be easy maths. EDIT: I also wonder if I can get the height of the text, so that I can center it vertically too. Any help is appreciated! Daniel Kvist I used the answer on this question . The code I used looks something like this: /** *

Vertically centering text within an inline-block

由 杀马特。学长 韩版系。学妹 提交于 2019-11-28 08:08:27
I'm trying to create some buttons for a website using styled hyperlinks. I have managed to get the button looking how I want, bar one slight issue. I can't get the text ('Link' in the source code below) to vertically center. Unfortunately there may be more than one line of text as demonstrated with the second button so I can't use line-height to vertically center it. My initial solution was to use display: table-cell; rather than inline-block , and that sorts the issue in Chrome, Firefox and Safari but not in Internet Explorer so I'm thinking I need to stick to inline-block. How would I go

Aligning elements left, center and right in flexbox

由 ＊爱你＆永不变心＊ 提交于 2019-11-28 05:55:07
I'm trying to create this top header using flexbox. Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image. .nav { background: #e1e1e1; } ol, ul { list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .header-title { justify-content: center; align-self: center; display: flex; } .nav ul li.logout { margin-left: auto; } .nav ul li a { text-decoration: none; padding: 0px 20px; font-weight: 600; } <div

Horizontally centering/evenly distributed <li> inside of <ul> inside a <div>

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-11-28 05:49:38
Have a Navbar <div> , inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar) I looked on google and this site and i couldnt find exactly what i was looking for. What i want is to be able to keep my current style (using <li> with <a> 's inside) and i want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div> ). Anyways if that doesnt make sense let me know, currently they are just left aligned...Heres what i have: HTML: <div class="navbar"> <ul> <li><a href=

css3: translateX to center element horizontally

由 情到浓时终转凉″ 提交于 2019-11-28 05:46:59
问题 I'm trying to center horizontally an element: jsfiddle <div id="parent"> <div id="child"> </div> On the child I have now the following css which doesn't center: transform: translateX(50%); Unfortunately the 50% is taken from the #child and not the parent. Is there a way to center this element using transforms (I know I can center it using, for example 'left')? Here is the full listing of css #parent { width: 300px height: 100px; background-color: black; border: 1px solid grey; } #child {
订阅 centering