Andy Janssens Ответов: 3

Как мне центрировать скрипт в CSS?

Привет,

Я ищу решение для центрирования скрипта из google maps на своем веб-сайте.
Вот ссылка для просмотра изображения:
http://img02.deviantart.net/4a2d/i/2016/287/c/6/naamloos_by_benjaminhallows-daky4nu.png[^]

Искренне,

~Андреас

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>


Что я уже пробовал:

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;
}

Richard Deeming

Вы не пытаетесь центрировать <script> тег, потому что это не видимый элемент.

Вместо этого вы пытаетесь центрировать <div> тег, который обновляется скриптом (gmap_canvas).

Центрирование в CSS: Полное руководство[^]

3 Ответов

Рейтинг:
2

José Amílcar Casimiro

Привет,

 <div align="center">
  This is some content!
</div>


Вы должны выровнять элемент DIV перед тегом script.

Овации,
JAFC

Рейтинг:
2

Andy Janssens

Спасибо вам всем за ваши решения и советы!

Выравнивание текста с div не сработало в сценарии
но я понял, что решение было таким:

div
{
    object-position: center;
   
}


или

<div style="object-position:center">
</div>


С этим мне удалось центрировать сценарий.

W∴ Balboos, GHB

Я никогда не использовал стиль позиции объекта. Глядя на него, кажется, что он предназначен для анимации:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position.

Методы другого решения работают уже много лет. Проверьте, поддерживается ли ваш стиль во всех браузерах, на которые вы нацелены.

Рейтинг:
0

W∴ Balboos, GHB

В зависимости от ваших обстоятельств вам может потребоваться использовать:

<div style="text-align: center; width: 100%">
  
</div>

Отличия (от предыдущего ответа):
- использование стиля CSS вместо старой атрибутивной методологии. Изображения обычно обрабатываются как текст по отношению к выравниванию.
- ширина:100% заставляет div занимать всю ширину своего контейнера, и карта будет центрирована в этом пространстве. В противном случае он будет центрироваться в div, но не на странице.

Если у вас есть другие элементы, соответствующие изображению, то вам нужно либо учитывать их ширину (и центрировать div, содержащий изображение), либо рассмотреть возможность использования стилей z-индекса для наложения элементов.

Еще одно соображение - вы также можете рассмотреть возможность определения размера вашего div с определенной шириной, а затем выравнивания его с помощью style='margin:0px auto 0px auto;'