我正在开发一个输出图像的页面，然后轮流允许用户共享/推特/ ...他们的图像。一切正常，除了一件事，Sharrre按钮不会集中在页面中。
我已经尝试了各种各样的方法，从通常将样式规则为width: 100%; margin: 0 auto;的父div中的div包装到text-align: center的最后一次尝试希望但是所有的徒劳无功。看到我正在使用jQuery Mobile，我甚至走下了尝试使用网格的路线，但仍然那些讨厌的按钮粘在页面的左边，好像悬崖位于那里和中心之间。 有没有人有任何想法？我已经创建了一个JSBin来演示问题（JSFiddle已关闭） - http://jsbin.com/qeqowofu/1/edit
Sharrre Github：https://github.com/Julienh/Sharrre/blob/master/jquery.sharrre.js [包括.js文件]
非常感谢提前！
-
HTML：
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div>
<div id="output">
<p>Welcome Message</p>
</div>
<div data-role="content" class="ui-content">
<div id="photo">
<?php
if (isset($_GET['key'])) {
try {
$photo = $share->getPhoto((int)$_GET['key']);
echo '
<div class="ui-grid-a my-breakpoint"><div class="ui-block-a"><img src="images/'.$photo.'" style="width: 768px; height: 432px;"/>
<br><br>
<div id="twitter" data-url="http://url.co.uk" data-text="Popup text" data-title="Tweet"></div>
<div id="facebook" data-url="http://url.co.uk" data-text="Popup text" data-title="Share"></div>
<div id="googleplus" data-url="http://url.co.uk" data-text="Popup text" data-title="+1"></div>
</div></div>
';
} catch (Exception $e) {
echo "<div class='ui-grid-a my-breakpoint'><div class='ui-block-a'><p style='color: #c53131'>".$e->getMessage()."</p></div></div>";
}
} else {
echo "<div class='ui-grid-a my-breakpoint'><div class='ui-block-a'><p style='color: #c53131'>The URL you gave us has no key. Please make sure it reads ...photo.php?key=123456 and we'll look again!</p></div></div>";
}
?>
CSS：
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 90%;
float:none;
}
}
@media all and (min-width: 45em) {
.my-breakpoint.ui-grid-b .ui-block-a { width: 90%;}
}
#photo {margin-top: 40px;}
#photo a {text-decoration: none;}
#photo a:hover {color: #fff;}
.ui-block-a {
text-align: center !important;
width: 100% !important;
}
#output {background-color: #f6f6f6; height: 100px; margin-top: -16px; border-bottom: 1px solid #dddddd;}
#output p {text-shadow: none; font-weight: bold; font-size: 16px; text-align: center; padding: 40px;}
.sharrre{
margin:55px 0 0 50px;
float:left;
}
.sharrre .box a:hover{
text-decoration:none;
}
.sharrre .count {
color:#525b67;
display:block;
font-size:18px;
font-weight:bold;
line-height:40px;
height:40px;
position:relative;
text-align:center;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:1px solid #b2c6cc;
background: #fbfbfb; /* Old browsers */
background: -moz-linear-gradient(top, #fbfbfb 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.sharrre .count:before, .sharrre .count:after {
content:'';
display:block;
position:absolute;
left:49%;
width:0;
height:0;
}
.sharrre .count:before {
border:solid 7px transparent;
border-top-color:#b2c6cc;
margin-left:-7px;
bottom: -14px;
}
.sharrre .count:after {
border:solid 6px transparent;
margin-left:-6px;
bottom:-12px;
border-top-color:#fbfbfb;
}
.sharrre .share {
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
margin-top:8px;
padding:0;
text-align:center;
text-decoration:none;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#twitter .share {
text-shadow: 1px 0px 0px #0077be;
filter: dropshadow(color=#0077be, offx=1, offy=0);
border:1px solid #0075c5;
background: #26c3eb;
background: -moz-linear-gradient(top, #26c3eb 0%, #26b3e6 50%, #00a2e1 51%, #0080d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26c3eb), color-stop(50%,#26b3e6), color-stop(51%,#00a2e1), color-stop(100%,#0080d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* IE10+ */
background: linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26c3eb', endColorstr='#0080d6',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #5cd3f1 inset;
}
#facebook .share {
text-shadow: 1px 0px 0px #26427e;
filter: dropshadow(color=#26427e, offx=1, offy=0);
border:1px solid #24417c;
background: #5582c9; /* Old browsers */
background: -moz-linear-gradient(top, #5582c9 0%, #33539a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5582c9), color-stop(100%,#33539a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5582c9 0%,#33539a 100%); /* IE10+ */
background: linear-gradient(top, #5582c9 0%,#33539a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5582c9', endColorstr='#33539a',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #80a1d6 inset;
}
#googleplus .share {
text-shadow: 1px 0px 0px #222222;
filter: dropshadow(color=#222222, offx=1, offy=0);
border:1px solid #262626;
background: #6d6d6d; /* Old browsers */
background: -moz-linear-gradient(top, #6d6d6d 0%, #434343 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#434343)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* IE10+ */
background: linear-gradient(top, #6d6d6d 0%,#434343 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #929292 inset;
}
答案 0 :(得分：0)
我认为您可以使用div来包含这两种社交图标：
.shareContainer{
width:240px;
margin:0 auto;
text-align:center;
}
并更新您的＆＃34; .sharrre＆＃34;像这样的课：
.sharrre{
margin:55px 0 0 50px;
float:left;
text-align:center;
margin-right:auto;
margin-left:auto;
padding:0 20px;
}
此处已更新JS Bin
希望这有助于作为一个起点。