centering

Vertically center flex item in a second column

由 牧云@^-^@ 提交于 2019-12-13 18:05:52
问题 I'm modifying a portfolio module that displays in list view with flexbox, however, I'm having trouble finessing the last child in the flexbox where I'd like it. I feel like this should be possible, put perhaps my approach is a bit off. I've tried wrapping the .post-tag div in it's own flexbox container and using margin-left: auto; , and while it justifies it where I want, it's not exactly what I'm looking for since there's a void underneath everything occupied by the auto-margin. I'm still

Can't Center Nav Div

由 北城余情 提交于 2019-12-13 06:25:12
问题 Okay, so I've looked at various posts on StackOverflow addressing the problem of centering a nav div. The solution seems to be: .menu { text-align: center; } But no matter what div wrapping around the nav I use this on it does nothing. You can see the problem at http://www.dustinlee.co I'm using this framework: https://github.com/jbckmn/naked-wordpress Notice the navigation is on the left hand side. Even more strange, when you resize the window it begins to almost to the center. Adding even

How to layout image so it is to left of ad space and yet centered using flexbox

由 谁说胖子不能爱 提交于 2019-12-13 03:55:05
问题 I have the following HTML: <!doctype html> <html> <head> <meta charset="utf-8" /> <style> * { box-sizing: border-box; } section, header { width: 100vw; height: 100vh; } header { display: flex; flex-direction: row; } header div { flex: 1; } header aside { background: black; } </style> </head> <body> <header> <div style='background-image: url(https://i.cloudup.com/C9UpLWmovB.jpg);'> </div> <aside> </aside> </header> <section> <p>Hello World.</p> </section> </body> </html> I am trying to make it

Centering nested divs

由 天大地大妈咪最大 提交于 2019-12-13 01:28:38
问题 Once again I'm having issues centering divs... http://www.srcf.ucam.org/~sas98/project.php How would I go about centering everything in #main? 回答1: To center <div class="main"> (and it is a class - that means it's .main , not #main - your HTML and CSS do not agree with each other on this point): Add margin: 0 auto; width: 1020px to .main . 1020px is the right number to use here. You also need to remove width: 100% from body , or your centering will not be precisely correct. You should also

CSS centering text between two images

由 自作多情 提交于 2019-12-12 16:16:16
问题 I need to display two images and some text like so: ------------------------------------------ img1--------some centered text-------img2 ------------------------------------------ img1 and img2 are not the same dimensions, but their widths are very close The text is variable depending on the page in which it is displayed, and may include two lines instead of one. The text needs to centered horizontally between the two images, or between the outside of the container (either will be fine) the

Centering multiline floated elements

由 家住魔仙堡 提交于 2019-12-12 13:38:05
问题 I've been trying/searching for a while, but I can't make it work. <div class="wrapper"> <div class="project-container"> <ul> <li><div class="project-box"></div></li> <li><div class="project-box"></div></li> <li><div class="project-box"></div></li> </ul> </div> </div> I managed to center floated elements (like in here http://jsfiddle.net/z7pqP/2/) following this explanation (http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css). However, if the floated

Centering grid items in an auto-fill container

由 落爺英雄遲暮 提交于 2019-12-12 10:43:34
问题 I have set up a grid with two items. This grid can contain any number of items but two is enough for this example. Background In the example there are two gray boxes align to the left. Using an inspector on a wide screen (above 1000px) we can spot a third (or more) "shadow" item that fills up the rest of the space. Question How can I center the boxes in the grid? Like the "shadow" item(s) does not exist. On the .grid element I still want to use a grid because of the automatic media queries I

Center content in a absolute positioned div

由 余生长醉 提交于 2019-12-12 07:46:34
问题 I have an absolutly positioned element with content inside. It can be a <h1> or a few <p> tag. So I don't know the height of the content. How can I vertically center the content inside the absolutly positioned div ? HTML : <div id="absolute"> <div class="centerd"> <h1>helo</h1> <span>hi again</span> </div> </div> CSS : #absolute { position:absolute; top:10px; left:10px; width:50%; height:50%; background:yellow; } .centerd { display:table-cell; vertical-align:middle; } Fiddle 回答1: if you add

Google Maps API v3: How to center on 2 dynamic addresses?

由 大城市里の小女人 提交于 2019-12-12 05:12:50
问题 I've spent the last 8 hours trying to do something extremelly easy. The problem is that I'm not very familiar with JavaScript neither Google Maps API. All I want to do is to find the center of 2 different locations and zoom accordly. The 2 address are dinamically, since the user will input the info. All my searched ended on API v2 or for fixed locations. Could someone please help me out? I really appreciate it! Thanks a lot in advance!!! <script src="https://maps.googleapis.com/maps/api/js

How to tell where a horizontally centered element is exactly, if it is not precise in Chrome?

由 为君一笑 提交于 2019-12-12 02:26:43
问题 A picture and a fiddle is worth more than a thousand words: http://jsfiddle.net/xrer55r7/ Slowly resize the window and see the striped background mis-aligned every now and then. I'm logging the position in the console, which doesn't change at all. Visually it does, though. Chrome aligns a horizontally centered element (with text-align: center; ) in another horizontally centered element (with margin: 0 auto; ) in a way that it rounds the apparent position, resulting in a visual change. It is
订阅 centering