centering

What makes the text on a <button> element vertically centered?

由 泪湿孤枕 提交于 2019-11-26 12:26:58
问题 It seems there is some magic around the <button> element that I don\'t understand. Consider this markup: <button class=\"button\">Some Text</button> <div class=\"button\">Some Text</div> And this CSS: .button{ background: darkgrey; height: 40px; border: 2px solid grey; width: 100%; box-sizing: border-box; font-size: 14px; font-family: helvetica; text-align: center; margin-bottom: 20px; /*I\'m aware I could use this to center it*/ /*line-height: 40px;*/ } What makes the text in the button

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

由 泪湿孤枕 提交于 2019-11-26 11:29:39
问题 Just a quick question that was bugging my mind : Why centering with margin:0 auto does work fine with display:block but does not center a div when display is set to display:inline-block Thanks for answers 回答1: My understanding is as follows (though I am happy to be corrected). Inline elements do not have a width property, and so the "auto" cannot be calculated. Block elements have a width property, so the width of the "auto" can be calculated. Inline-block elements have an outside which acts

Using margin:auto to vertically-align a div

由 烂漫一生 提交于 2019-11-26 11:03:43
So I know we can center a div horizontally if we use margin:0 auto; . Should margin:auto auto; work how I think it should work? Centering it vertically as well? Why doesn't vertical-align:middle; work either? .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; } <div class="black"> <div class="message"> This is a popup message. </div> </div> JSFiddle o.v. You can't use: vertical-align:middle because it's not applicable to block-level elements margin-top:auto and margin-bottom:auto

How to center a button within a div?

由 ≡放荡痞女 提交于 2019-11-26 10:07:59
问题 I have a div that\'s width is 100%. I\'d like to center a button within it, how might I do this? <div style=\"width:100%; height:100%; border: 1px solid\"> <button type=\"button\">hello</button> </div> 回答1: Updated Answer Updating because I noticed it's an active answer, however Flexbox would be the correct approach now. Live Demo Vertical and horizontal alignment. #wrapper { display: flex; align-items: center; justify-content: center; } Just horizontal (as long as the main flex axis is

CSS horizontal centering of a fixed div?

由 好久不见. 提交于 2019-11-26 10:06:48
问题 #menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } I know this question is a million times out there, however I can\'t find a solution to my case. I\'ve got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen! The div should have 500px width, should be 30px away from the top (margin-top), should be horizontally

How to horizontally center an unordered list of unknown width?

由 风格不统一 提交于 2019-11-26 06:14:52
问题 It is common to have a set of links in a footer represented in a list, such as: <div id=\"footer\"> <ul> <li><a href=\"#\">Home</a></li> <li><a href=\"#\">About</a></li> <li><a href=\"#\">Contact</a></li> </ul> </div> I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; } . Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; } . But how do you center the unordered

Center a position:fixed element

由 爱⌒轻易说出口 提交于 2019-11-26 05:38:20
I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed; , it's even not centering horizontally. Here's the complete set: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> How do I center this box in screen with

How to center a window on the screen in Tkinter?

由 删除回忆录丶 提交于 2019-11-26 04:19:45
问题 I\'m trying to center a tkinter window. I know I can programatically get the size of the window and the size of the screen and use that to set the geometry, but I\'m wondering if there\'s a simpler way to center the window on the screen. 回答1: You can try to use the methods winfo_screenwidth and winfo_screenheight , which return respectively the width and height (in pixels) of your Tk instance (window), and with some basic math you can center your window: import tkinter as tk from PyQt4 import

Using margin:auto to vertically-align a div

由 删除回忆录丶 提交于 2019-11-26 03:29:09
问题 So I know we can center a div horizontally if we use margin:0 auto; . Should margin:auto auto; work how I think it should work? Centering it vertically as well? Why doesn\'t vertical-align:middle; work either? .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; } <div class=\"black\"> <div class=\"message\"> This is a popup message. </div> </div> JSFiddle 回答1: You can't use:

Center a position:fixed element

由 有些话、适合烂在心里 提交于 2019-11-26 03:25:11
问题 I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed; , it\'s even not centering horizontally. Here\'s the complete set: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class=\"jqbox_innerhtml\"> This
订阅 centering