دوستان عزیز خودم خیلی با این مشکل درگیر بودم تا srackoverflow اومد به سراغم و نجاتم داد خوشبختانه.. .
به این متن دقت کنید:
The first approach uses Bootstrap’s own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row.
اون تیکه بولد شده میگه یه offset تنظیم کنید که نصف اندازه باقیمونده اون ردیف باشه.
کد خودم رو گذاشتم تا مثال کاملا گیرا باشه.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CELEBRATION</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<link href="assets/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- <link href="assets/css/bootstrap/bootstrap.min.css.map" rel="stylesheet">-->
<link href="assets/css/bootstrap/bootstrap-theme.min.css" rel="stylesheet">
<!-- <link href="assets/css/bootstrap/bootstrap-theme.min.css.map" rel="stylesheet">-->
<link href="assets/css/bootstrap/bootstrap-rtl.css" rel="stylesheet">
<link href="assets/css/bootstrap/bootstrap-social.css" rel="stylesheet">
<script language="javascript" src="assets/js/bootstrap/bootstrap.min.js"></script>
<!-- <link href="assets/css/bootstrap-select.css" rel="stylesheet">-->
<!-- <script language="javascript" src="assets/js/bootstrap-select.js"></script>-->
<link href="assets/css/css.css" rel="stylesheet">
<link href="assets/css/iransans.css" rel="stylesheet">
<link href="assets/css/yekanFont.css" rel="stylesheet">
</head>
<div class="limiter" style=".limiter {
width: 100%;
margin: 0 auto;
}">
<div class="container-fluid " >
<div class=" col-xs-12 col-sm-12 col-md-6 col-lg-offset-3">
<div class="alert alert-success text-center" role="alert" style="font-weight: bold; font-size: 20px; font-family: IRANSans" id="msg">
<?php echo 'ثبت نام شما با موفقیت انجام شد.' ; ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-offset-3">
<img src="CelebrationsignUp4.gif" class="img-rounded img-responsive" alt="CelebrationMessage" id="img" id="cebgif">
</div>
</div>
</div>
</div>
</body>
</html>
اسکرین لپ تاپ من میره تو دسته large ؛ اگه میخوام متن و عکس وسط بیفته، باید 6 تا ستون(column) رد کنم تا دقیقا بیفته وسط. حالا 6 تا ستون دیگه باقیمونده؛ بنا برگفته اون شخص باید 3تا offset بزنم تا عکس و متن من وسط چین بیفته. خروجی به صورت زیر میشه:
دوستان لینک صفحه اصلی رو میذارم شاید نظرات دبگه بیشتر به دردتون بخوره.