centering

Horizontally and vertically center bootstrap 4 columns in consecutive rows

由 流过昼夜 提交于 2021-02-19 03:48:18
问题 I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows. The grid layout is <body style="height: 100vh;"> <div class="container"> <div class="row"> <div class="col-6"> <div class="card"> hello </div> </div> </div> <div class="row"> <div class="col-4"> <div class="card"> world </div> </div> </div> </div> </body> the cards are just to outline the containers. I'm aware there are MANY questions on vertical alignment, and I may have

How to horizontally center an element

由 ↘锁芯ラ 提交于 2021-02-17 06:43:28
问题 How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div> 回答1: You can apply this CSS to the inner <div> : #inner { width: 50%; margin: 0 auto; } Of course, you don't have to set the width to 50% . Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering. If you are targeting Internet Explorer 8 (and later), it might be better to have this instead: #inner { display: table; margin:

Unordered List Won't Center Align

由 房东的猫 提交于 2021-02-17 05:31:05
问题 h1 seems to have no trouble centering, however, the list (menu bar) will not align, it seems to be indented slightly. Please explain. My HTML: <h1>Welcome!</h1> <ul> <li>Home</li> <li>About Us</li> <li>Contact</li> </ul> My CSS: h1{ text-align: center; } ul{ position:relative; display: inline-block; list-style: none; width:100%; text-align: center; margin: auto; } li{ list-style: none; text-align: center; margin: 15px; display: inline-block; } 回答1: There's still default padding on the ul

How to zoom to center of canvas, not to center of context

由 荒凉一梦 提交于 2021-02-08 06:52:48
问题 I have a canvas, size 400 x 400. On it, i have drawn a map area, 200 x 200. I have translated this to the center of the canvas. I can zoom in and out, all is well. But, when i pan, it zooms from the center of my map area. I want it to always zoom from the center of the canvas no matter where the map area is. I think i need to negate the pan coords somehow, but i can't figure it out. Here is my code: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var

Right edge of content covered by vertical scrollbar in centered div

由 天大地大妈咪最大 提交于 2021-02-07 14:51:28
问题 I'd like to create a centered popup with a title and one or more cards under it. Each card contains a small table. When there are more cards than can be displayed, a vertical scrollbar appears. But there is problem: the vertical scrollbar covers the right edge of the cards. The behavior depends on the browser: Chrome : The problem appears when the page is refreshed, but disappears when the page is resized. Firefox : The problem is more serious , because it doesn't disappear on page resize.

How to calculate the midpoint of several geolocations in python

由 可紊 提交于 2021-02-06 21:34:50
问题 Is there's a library or a way to calculate the center point for several geolocations points? This is my list of geolocations based in New York and want to find the approximate midpoint geolocation L = [ (-74.2813611,40.8752222), (-73.4134167,40.7287778), (-74.3145014,40.9475244), (-74.2445833,40.6174444), (-74.4148889,40.7993333), (-73.7789256,40.6397511) ] 回答1: After the comments I received and comment from HERE With coordinates that close to each other , you can treat the Earth as being

How to center text inside :before pseudo element?

由 十年热恋 提交于 2021-02-06 11:01:19
问题 I have code like this: span { border-radius: 50%; background-color: #d8d9dd; border: 6px solid #262c40; width: 25px; height: 25px; margin: 30px 0 0 40px; display: block; } span:before { content: attr(data-value); position: relative; white-space: pre; display: inline; top: -27px; left: -29px; width: 200px; text-align: center; } <span data-value="November 2016"></span> <span data-value="May 2016"></span> How can I center the text inside :before pseudo element to be in the middle of the span? Is

Positioning text over image (html,css)

由 梦想与她 提交于 2021-02-01 01:51:02
问题 So, I have an image and I want to display in the center of it some text. Code: .img { position: relative; } .img h3 { position: absolute; width: 100% top: 85px; text-align: center; } Ok, so I managed to do it. But here is the thing: when I resize my browser and the image becomes smaller, the text is going out of the image. So my question is, do I have to use the @media rule for all the different dimensions? And how do I know which dimensions to use in my CSS? Or is there maybe something I can

Positioning text over image (html,css)

由 亡梦爱人 提交于 2021-02-01 01:49:35
问题 So, I have an image and I want to display in the center of it some text. Code: .img { position: relative; } .img h3 { position: absolute; width: 100% top: 85px; text-align: center; } Ok, so I managed to do it. But here is the thing: when I resize my browser and the image becomes smaller, the text is going out of the image. So my question is, do I have to use the @media rule for all the different dimensions? And how do I know which dimensions to use in my CSS? Or is there maybe something I can

translateY -50% does not center things exactly

由 我怕爱的太早我们不能终老 提交于 2021-01-29 13:30:40
问题 I'm vertically centering custom arrows on BxSlider using translateY-50%. It's kinda centering the icons, but not exactly. This is what I have now" Note the grey bars are of the same height, so the icon is placed more towards the bottom. What's causing this? $(document).ready(function(){ $('.slider').bxSlider({ auto: true, pause: 3000, mode: 'fade', speed: 1200, pager: false, controls: true, nextSelector: '.bxNext', prevSelector: '.bxPrev', nextText: '<img id="next-arrow" src="img/next.png">',
订阅 centering