尝试将图像放在 col-md-6 中，在 phone 上查看时居中
Trying to place an image in col-md-6, centred when viewed on phone
将图像放置在 bootstrap col-md-6 中的最佳做法是什么，以便它居中但仅当在 phone 上查看时？
我试图在 queries.css 文件中执行此操作，但我被卡住了。
此外，我是否应该 link 我正在处理的网站或引用代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nalexanderdev.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/queries.css" rel="stylesheet">
<link rel="icon"
type="image/jpg"
href="img/profile5.jpeg" />
<nav class="navbar navbar-default">
<div class="containerNavbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">nalexanderdev.com</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Home</h3></section><br>
<p>I am a student at National College of Ireland studying Science in Computing: Software Development. In my spare time I make websites.apps using different coding languages.</p>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Latest Completed Project:
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="http://176.32.230.46/omnifoodproject.com/index.php" target="_blank">Project: Omnifood</a></br>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div id="wrapper" style="width:100%; text-align:right">
<img class="profile" src="img/profile5.jpeg" alt="profile5"/>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Bootstrap Projects:
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="http://176.32.230.51/theblog.com/" target="_blank">Project: The Blog</a></br>
<a href="http://176.32.230.53/businesstheme.com/" target="_blank">Project: Business Theme</a></br>
<a href="http://176.32.230.52/ecommercetemplate.com/" target="_blank">Project: Ecommerce Template Using LESS</a></br>
<a href="http://176.32.230.53/edxco.com/" target="_blank">Project: Company Website</a></br>
<a href="http://176.32.230.52/cmsadminproject.com/login.html" target="_blank">Project: CMS Admin</a></br>
<a href="http://176.32.230.52/photogallery.com/" target="_blank">Project: Photo Gallery</a></br>
<a href="http://176.32.230.51/dobblesocialmediasite.com/" target="_blank">Project: Social Media Site</a></br>
<a href="http://176.32.230.50/fotoshareappproject.com/" target="_blank">Project: Photo Share App</a></br>
<a href="http://176.32.230.50/agencylandingpage.com/" target="_blank">Project: Agency Landing Page Using LESS</a></br>
<a href="http://176.32.230.52/sassresumepage.com/" target="_blank">Project: Resume Page using SASS</a></br>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Web Dev Projects:
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="http://176.32.230.50/mymobileapp.com/" target="_blank">Project: My Mobile App(c 2013)</a></br>
<a href="http://217.199.187.190/postcodeproject.com/" target="_blank">Project: Postcode Finder</a></br>
<a href="http://79.170.44.219/nalexanderdev.com/php/index.php?" target="_blank">Project: Weather Forecast</a></br>
<a href="http://www.nalexanderdev.com/wordpress/" target="_blank">Project: Wordpress</a></br>
<a href="http://217.199.187.195/landingpageproject.com/" target="_blank">Project: Landing Page</a></br>
<a href="http://176.32.230.47/playcodeplayer.com/" target="_blank">Project: CodePlayer</a></br>
<a href="http://176.32.230.46/omnifoodproject.com/" target="_blank">Project: Omnifood</a></br>
<a href="http://176.32.230.8/nicksthfcsite.com/" target="_blank">Project: THFC site</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Games:
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="http://176.32.230.49/reactionstester.com/" target="_blank">Reactions tester</a></br>
<a href="http://79.170.40.170/nickalexandershowmanyfingers.com/" target="_blank">How many fingers?</a><br/>
<a href="http://176.32.230.8/nicksproject1.com/" target="_blank">Javascript circle</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
这是因为md表示中等，主要用于平板电脑和上网本的显示器。除了在两个 div 上添加 col-md-6 之外，还添加一个 `col-xs-6。这是 Extra Small 专栏，适用于手机。为了以后参考，请添加所有代码和相关信息。
将图像放置在 bootstrap col-md-6 中的最佳做法是什么，以便它居中但仅当在 phone 上查看时？
我试图在 queries.css 文件中执行此操作，但我被卡住了。
此外，我是否应该 link 我正在处理的网站或引用代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nalexanderdev.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/queries.css" rel="stylesheet">
<link rel="icon"
type="image/jpg"
href="img/profile5.jpeg" />
<nav class="navbar navbar-default">
<div class="containerNavbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">nalexanderdev.com</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Home</h3></section><br>
<p>I am a student at National College of Ireland studying Science in Computing: Software Development. In my spare time I make websites.apps using different coding languages.</p>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Latest Completed Project:
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="http://176.32.230.46/omnifoodproject.com/index.php" target="_blank">Project: Omnifood</a></br>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div id="wrapper" style="width:100%; text-align:right">
<img class="profile" src="img/profile5.jpeg" alt="profile5"/>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Bootstrap Projects:
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="http://176.32.230.51/theblog.com/" target="_blank">Project: The Blog</a></br>
<a href="http://176.32.230.53/businesstheme.com/" target="_blank">Project: Business Theme</a></br>
<a href="http://176.32.230.52/ecommercetemplate.com/" target="_blank">Project: Ecommerce Template Using LESS</a></br>
<a href="http://176.32.230.53/edxco.com/" target="_blank">Project: Company Website</a></br>
<a href="http://176.32.230.52/cmsadminproject.com/login.html" target="_blank">Project: CMS Admin</a></br>
<a href="http://176.32.230.52/photogallery.com/" target="_blank">Project: Photo Gallery</a></br>
<a href="http://176.32.230.51/dobblesocialmediasite.com/" target="_blank">Project: Social Media Site</a></br>
<a href="http://176.32.230.50/fotoshareappproject.com/" target="_blank">Project: Photo Share App</a></br>
<a href="http://176.32.230.50/agencylandingpage.com/" target="_blank">Project: Agency Landing Page Using LESS</a></br>
<a href="http://176.32.230.52/sassresumepage.com/" target="_blank">Project: Resume Page using SASS</a></br>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Web Dev Projects:
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="http://176.32.230.50/mymobileapp.com/" target="_blank">Project: My Mobile App(c 2013)</a></br>
<a href="http://217.199.187.190/postcodeproject.com/" target="_blank">Project: Postcode Finder</a></br>
<a href="http://79.170.44.219/nalexanderdev.com/php/index.php?" target="_blank">Project: Weather Forecast</a></br>
<a href="http://www.nalexanderdev.com/wordpress/" target="_blank">Project: Wordpress</a></br>
<a href="http://217.199.187.195/landingpageproject.com/" target="_blank">Project: Landing Page</a></br>
<a href="http://176.32.230.47/playcodeplayer.com/" target="_blank">Project: CodePlayer</a></br>
<a href="http://176.32.230.46/omnifoodproject.com/" target="_blank">Project: Omnifood</a></br>
<a href="http://176.32.230.8/nicksthfcsite.com/" target="_blank">Project: THFC site</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Games:
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="http://176.32.230.49/reactionstester.com/" target="_blank">Reactions tester</a></br>
<a href="http://79.170.40.170/nickalexandershowmanyfingers.com/" target="_blank">How many fingers?</a><br/>
<a href="http://176.32.230.8/nicksproject1.com/" target="_blank">Javascript circle</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
这是因为md表示中等，主要用于平板电脑和上网本的显示器。除了在两个 div 上添加 col-md-6 之外，还添加一个 `col-xs-6。这是 Extra Small 专栏，适用于手机。为了以后参考，请添加所有代码和相关信息。