centering | 易学教程

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

阅读更多关于 What makes the text on a element vertically centered?

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 element vertically centered? Webkit seems to predefine a -webkit-box-align with a value of center for the <button

Centering a div vertically & horizontally using jQuery

阅读更多关于 Centering a div vertically & horizontally using jQuery

I am using this script to center my div horizontally and vertically. When the page loads the div gets centered vertically, not horizontally until I resize the browser. What am I doing wrong? $(document).ready(function (){ $(window).resize(function (){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); }); $(window).resize(); }); Dim13i I normally use this "technique": $(function() { $('.className').css({ 'position' : 'absolute', 'left' : '50%', 'top' : '50%', 'margin-left' : -$('

How to horizontally center a floating element of a variable width?

阅读更多关于 How to horizontally center a floating element of a variable width?

How to horizontally center a floating element of a variable width? Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element. Assuming the element which is floated and will be centered is a div with an id="content" ... <body> <div id="wrap"> <div id="content"> This will be centered </div> </div> </body> And apply the following CSS:

How to center a button within a div?

阅读更多关于 How to center a button within a div?

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%"> <button type="button">hello</button> </div> 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 horizontal which is default) #wrapper { display: flex; justify-content: center; } Original Answer using a fixed width and no flexbox If

Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

阅读更多关于 Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

问题 I have in my page a button which when clicked displays a div (popup style) in the middle of my screen. I am using the following CSS to center the div in the middle of the screen: .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } This CSS works fine as long as the page is not scrolled down. But, if I place the button at the bottom of my page, when it is

Center flex items on wrap

阅读更多关于 Center flex items on wrap

问题 I have set up a flexbox with two items which should be on the left and right on a normal screen. If the screen is not big enough to show both next to each other, it should wrap but then they should be centered and not aligned on the left. I tried different solutions (like using margin: auto on the child items) but that aligned them more to the center even when in the same row. Here is a simplified example: .container { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content:

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

阅读更多关于 What's the difference between margin:auto and justify-content / align-items center?

问题 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? 回答1: 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

Scrollbar shifts content

阅读更多关于 Scrollbar shifts content

问题 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.

CSS horizontal centering of a fixed div?

阅读更多关于 CSS horizontal centering of a fixed div?

#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 centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page

Aligning elements left, center and right in flexbox

阅读更多关于 Aligning elements left, center and right in flexbox

问题 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 {