如何在CSS中居中心？ [英] How do I center a script in CSS?
问题描述
您好，
我正在寻找一个解决方案，让我的网站上的谷歌地图中心脚本。
这是查看图像的链接：
http://img02.deviantart.net/4a2d/i/2016/287/c/6/naamloos_by_benjaminhallows-daky4nu.png [ ^ ]
此致，
~Andreas
html：
Hello,
I am looking for a solution to center a script from google maps on my website.
Here is the link to view the image:
http://img02.deviantart.net/4a2d/i/2016/287/c/6/naamloos_by_benjaminhallows-daky4nu.png[^]
Sincerely,
~Andreas
html:
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" type="text/css"href="Contact.css">
<ul>
<li><a href="header.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="">Contact</a></li>
<li><a href="">Gallerij</a></li>
<li><a href="">Agenda</a></li>
<li><a href="">Openingstijden</a></li>
<li><a href="">Menu</a></li>
<p> --- Cafe <strong> Welkom</strong> ---
</ul>
</header>
<body>
<br>
<div>
<title>Contact</title>
<p><strong>Contact</strong></p>
<p>telefoon:015 63 53 93</p>
<p>email:</p>
<p>Hier zijn wij!</p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:435px;width:696px;'><div id='gmap_canvas' style='height:435px;width:696px;'></div><div><small><a href="http://www.embedgooglemaps.com/nl/">Genereer hier eenvoudig je Google Maps code! Klik hier! Bezoek onze website</a></small></div><div><small><a href="https://glasvezelvergelijken.org/">Bezoek onze website</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.0260407,4.690030299999989),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.0260407,4.690030299999989)});infowindow = new google.maps.InfoWindow({content:'<strong>Cafe Welkom</strong><br>Hoogstraat 36, 2223 Schriek<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
</div>
</body>
<br>
<br>
<foot>
<p style="font-size:12px;">Alle rechten naar Cafe Welkom Schriek.</p>
</foot>
</html>
我的尝试：
What I have tried:
header
{
text-align: center;
list-style-position: outside;
}
ul {
list-style-type: none;
position:static;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
text-underline-position: alphabetic;
}
li a {
font-size: 22px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkkhaki;
}
p
{
font-family: sans-serif;
color: lightgoldenrodyellow;
font-size: 25px;
}
body
{
background-color: black;
}
div
{
text-align: center;
}
script
{
text-align: center;
}
foot p
{
text-align: center;
background-color: #333;
}
推荐答案
你好，
Hello,
<div align="center">
This is some content!
</div>
您必须在脚本标记之前对齐DIV元素。
干杯，
JAFC
You must align the DIV element before the script tag.
Cheers,
JAFC
谢谢大家的解决方案和建议！
文本与div对齐不适用于脚本
但我发现解决方案是这样的：
Thank you all for your solutions and advices!
The text align with div didn't work on the script
but I figured out the solution was this:
div
{
object-position: center;
}
或< br $> b $ b
or
<div style="object-position:center">
</div>
随着我成功地使脚本居中。
With that I succeeded centering the script.
根据您的具体情况，您可能需要使用：
Depending upon your circumstances, you may need to use:
<div style="text-align: center; width: 100%">
</div>
差异（来自上一个答案）：
- 使用CSS样式而不是旧属性方法。图像通常像文本一样处理对齐。
- 宽度：100％强制div为取整个宽度的容器，地图将以该空间为中心。否则，它将以div为中心但不在页面上。
如果您有其他物品 - 与图像对齐，要么考虑它们的宽度（并使包含图像的div居中），要么考虑使用z-index样式来分层项目。
进一步考虑 - 您还可以考虑使用特定宽度调整div的大小，然后通过 style ='margin：0px auto 0px auto;'
这篇关于如何在CSS中居中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
