Javascript 将图像居中放置在div中，文本在右侧_Javascript_Css_Html

Javascript 将图像居中放置在div中，文本在右侧

javascript css html

Javascript 将图像居中放置在div中，文本在右侧,javascript,css,html,Javascript,Css,Html,如何将右边有文本的div图像居中。页面是基于百分比的，我希望图像居中，文本浮动到右侧这是我到目前为止所拥有的 IMG.logo{ 显示：块；左边距：自动；右边距：自动} 注销您可以这样做： IMG.logo{ 位置：绝对位置；左：50%； -ms转换：翻译-50%； -webkit转换：翻译-50%；转化：转化-50%； } 查看这里：您可以通过使用绝对定位来模拟浮动，方法是将顶部和右侧调零 img.logo{ 显示：块；保证金：0自动； } .对{ 显示：内联块；位置：绝

如何将右边有文本的div图像居中。页面是基于百分比的，我希望图像居中，文本浮动到右侧

这是我到目前为止所拥有的

IMG.logo{ 显示：块；左边距：自动；右边距：自动} 注销

您可以这样做：

IMG.logo{ 位置：绝对位置；左：50%； -ms转换：翻译-50%； -webkit转换：翻译-50%；转化：转化-50%； }

查看这里：

您可以通过使用绝对定位来模拟浮动，方法是将顶部和右侧调零

img.logo{ 显示：块；保证金：0自动； } .对{ 显示：内联块；位置：绝对位置；排名：0；右：0；宽度：400px；右边距：8px；文本对齐：右对齐； } .line1{ 顶部：0px； } .line2{ 顶部：16px； } .bold{ 字体大小：粗体； } 注销

你好，比尔

以下是一个适用于宽屏幕和窄屏幕的解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.logoDiv {
    width: 100%;
}

.logo {
    text-align: center;
    position: absolute; 
    left: 0; 
    right: 0; 
}

.text {
    width: calc(50% - 130px); 
    float: right;
}

</style>
</head>
<body>

<div class="logoDiv">
    <div class="text">
      <p>Logout</p>
      <p>Hello Bill</p>
    </div>
    <div class="logo">
       <img alt="Britannia Logo" src="http://placehold.it/245x80" height="80" width="245">
    </div>
</div>

</body>
</html>