Question

只是一个快速的。我有3个Font Awesome图标，我用于我页面上的联系人按钮。它们垂直对齐并在容器div中居中。我还在每个图标旁边都有文字，这会导致图标和文本都在页面上居中。我所追求的是将图标垂直居中并使文本分开。我相信我可以将图标包装在容器中，然后将所有相应的文本包装在另一个容器中，但我意识到这会在我的CSS中看起来很混乱。我必须有一个简单的答案，我没有意识到。如果您不了解我正在进行的操作，请查看下面的代码段。感谢您的任何反馈。

<?php
session_start();
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

date_default_timezone_set('America/New_York');

require_once 'vendor/autoload.php';

$m = new PHPMailer(true);


try{
$m->SMTPDebug = 2;
$m->isSMTP();
$m->Host = 'smtp.gmail.com';
$m->SMTPAuth = true;


$m->Username = 'munsonatl@gmail.com';
$m->Password = 'somethingsecret';


$m->SMTPSecure = 'ssl';
$m->Port = 465;

$m->setFrom('munsonatl@gmail.com', 'Mailer');
$m->addAddress('munsonatl@gmail.com', 'Matt Macy');
$m->addReplyto('reply@mattmacy.com', 'replyAddress');


require 'connect.php';

$itemNum = $_SESSION['itemNum'];


$query2 = "SELECT* FROM MP3s_For_Sale WHERE itemNum = :itemNum";
$LastProduct = $db->prepare($query2);
$LastProduct->bindvalue(':itemNum', $itemNum);
$LastProduct->execute();

$rows = $LastProduct->fetch();

$filename = $rows['path'];
$filesize = $rows['filesize'];
$string =  $rows['wholeMP3'];
$encoding = 'base64';
$type = $rows['type']; 

$m->AddStringAttachment($string,$filename,$encoding,$type);

$m->isHTML(true);

$m->Subject = "Here is an Email";
$m->Body = "<p>This is the body of the email</p><br><strong>Test for 
HTML formatting</strong><br>";
$m->AltBody = "This is the body of an email";
$m->send();
echo "message has been sent";

unset($_SESSION['itemNum']);

} catch (Exception $e){
echo "message could not be sent", $m->ErrorInfo;
}

?>

Answer 1

您可以使用类别为 fa-fw 的固定宽度图标。这是link。

HTML

<div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

我希望它有所帮助。

Answer 2

过度思考整件事。我只是使用position：relative将它们移动到对齐位置。灯泡终于点亮了！

Answer 3

这样的东西？ Fiddle

<body>
<section class="contact-main">
    <div class="container">
    <div class="list-group">
      <div class="email">
        <i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
      </div>   
      <div class="phone">
        <i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
      </div>      
      <div class="facebook">
        <i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
      </div>
    </div>
    </div>        
</section>
</body>

中心图标与相应的文本分开

3 个答案: