Как расположить слайдер fotorama по центру?

Question

[Дмитрий]

На Вордпрессе использую базовую Фотораму:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> 

<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

По умолчанию слайдер располагается слева. Как его вставить по центру?

Решение вроде

.fotorama {
    margin: 0 auto;
}

не помогло.

Answer 1

[Марат]

Ширину прописать, а потом по центру сделайте.

.fotorama {
    width: 1000px;
    margin: 0 auto;
}

Comments

[Дмитрий]

Нет, тоже не помогло. Видимо, в коде что-то не то.

[Марат]

а так

.fotorama {
    width: 1000px !important;
    margin: 0 auto !important;
}

наверное стили поверх ваших встают какие то

[Дмитрий]

Марат: не, тоже не помогло. Вот сам код:

body {
	background: #fff; 
	font: 20px Hoefler Text, bodyfont, serif;
	color: #333;
        line-height: 30px;
        margin-left: 10%; margin-right: 10%;
	}
	
h1 {font-family: Helvetica, sans-serif; font-size: 1em; color:#333; font-weight:normal;  padding: 20px 0px 0px 0px;}
h2 {font-family: Helvetica, sans-serif; font-size: 1.5em; color:#333; line-height:26px; font-weight:normal; padding: 5px 0px 10px 0px;}
h3 {font-family: Helvetica, sans-serif; font-size: 18px; color:#666; line-height: 15px; text-indent: 0px; padding: 10px 0px 0px 0px;}
h4 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1em; color:#000000;}
h5 {font-size: 9pt; color:#000000;}

img{border:none;}
img a{border:none;}
blockquote{border-left:1px solid #A5ABAB; margin:0px; padding:0 12px 0 12px;}

p{line-height: 30px; margin:30px auto; text-indent: 0px;}

a {text-decoration: none;}
a:link {color: #333; text-decoration: none;}
a:visited {color: #333; text-decoration: none;}
a:hover {color: #999; text-decoration: none;}

ul{padding: .5em 0em 1em 3.2em;}
li{line-height: 30px; padding: 6px 0 0 0;}

ol{padding: .5em 0em 0em 3.2em;}
li{line-height: 30px; padding: 6px 0 0 0;}


#content {min-width: 20em; max-width: 50em; overflow: hidden;
	margin-top:60px; margin-left:64px; margin-right:14px; margin-bottom:0px;
        padding-left: 10%; padding-right: 10%}	
.entry a:link {color: #303030; text-decoration: none; border-width: 0 0 1px 0; border-style: none none solid none; border-color: #C0C0C0;}
.entry a:visited {color: #303030; text-decoration: none; border-width: 0 0 1px 0; border-style: none none solid none; border-color: #C0C0C0;}
.entry a:hover {color: #999; border-width: 0 0 1px 0; border-style: none none solid none; border-color: #C0C0C0; text-decoration: none;}
.entry strong{font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; color: #555555;}

#footer {margin-left:115px}
#footer {background:#fff; clear: both;}
#footer p{padding:4px 0;margin: 0; color: #666; font-size:13px; font-family:helvetica, sans-serif; letter-spacing:4px}
#footer a{color: #c0c0c0;text-decoration: none;}
#footer a:hover{color: #999;text-decoration: none;}


#arc {float: right; width:530px; overflow: hidden; margin-top:0px; margin-left:14px; margin-right:14px; margin-bottom:24px;}	
.arc p{color:#666; font-family: 'Verdana, sans-serif; font-size: 12px; font-weight: normal !important;}

.year th{color:#666; font-family: Verdana, sans-serif; font-size: 22px; font-weight: bold;}
.arctitle {color:#666; font-family: 'Verdana, sans-serif; font-size: 12px; font-weight: normal;}
.arctitle th {color:#999; font-family: 'Verdana, sans-serif; font-size: 14px; font-weight: normal;}
.arc2 {color:#999; font-family: 'Helvetica, sans-serif; font-size: 12px; font-weight: normal !important;}
.arc2 th {color:#999; font-family: 'Helvetica, sans-serif; font-size: 12px; font-weight: normal !important;}

Answer 2

[Александр]

.fotorama__wrap{
  margin: 0 auto;
}

Comments

[Дмитрий]

Я это тоже гуглил. Не подходит.

[Александр]

Дмитрий: Тогда нужно смотреть код.

Answer 3

[Владислав Бондаренко]

data-width="700" data-maxwidth="100%"
Указать ширину контейнера.