想知道文本和引号如何对齐.

已try 绝对和相对定位,但文本未居中对齐.

p{
  max-width: 1200px;
  background: #135527;
border: 7px solid #135527;
border-radius: 56px;
  width: 40%;
  font-family: 'Nunito Sans';
font-style: normal;
font-weight: 900;
font-size: 32px;
line-height: 44px;
text-align: center;
padding: 20px;
  margin: 30px auto;
color: #FFFFFF;
}


p::before {
    content: open-quote;
  font-family: 'Amarante';
font-style: normal;
font-weight: 400;
font-size: 85px;
color: #FFFFFF;
  padding: 80px 0 0 10px;
}
p::after {
    content: "\201E";
  font-family: 'Amarante';
font-style: normal;
font-weight: 400;
font-size: 85px;
color: #FFFFFF;
}
<p>Healthy living is making yourself feel at home by creating a home where your body & mind thrive.</p>

This is what Im trying to achieve. enter image description here

谢谢你的帮助

推荐答案

p {
  position: relative;
  max-width: 1200px;
  background: #135527;
  border: 7px solid #135527;
  border-radius: 56px;
  width: 40%;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 44px;
  text-align: center;
  padding: 20px;
  margin: 30px auto;
  color: #FFFFFF;
}

p::before {
  position: absolute;
  top: 0.35em;
  left: 0.1em;
  content: open-quote;
  font-family: 'Amarante';
  font-style: normal;
  font-weight: 400;
  font-size: 85px;
  color: #FFFFFF;
}

p::after {
  position: absolute;
  bottom: 0.5em;
  right: 0.1em;
  content: "\201E";
  font-family: 'Amarante';
  font-style: normal;
  font-weight: 400;
  font-size: 85px;
  color: #FFFFFF;
}
<p>Healthy living is making yourself feel at home by creating a home where your body & mind thrive.</p>

P位置相对位置、前后绝对位置

用左上角、左上角、左上角和下左角、右上角和右下角打球,这样你就有了你想要的位置.

值在em中,但您可以将px

Html相关问答推荐

从网络抓取中提取文本

HTML表行悬停仅适用于偶数行

VBA从公共Google Drive地址下载文档-.Click事件(?)

在iOS中调整HTML邮箱内容的大小

仅在加载视频时显示描述(<;Video>;标签)

将导航项目底部边框与导航栏对齐

如何创建嵌套的动态表单元素

带下划线的文本应该有延长的下划线,以使其图像悬停

希望平稳过渡到悬停状态

如何使背景图像在面包屑中相互重叠

如何在CSS中延迟触发2个转换?

视频重新加载而不是在 Swift 中暂停 WKWebView

Div 容器不会遵守边距、填充或间隙

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何将图像移动到父容器的右侧?

在身体外部创建 tanget 45° div

我用 ejs 修复了一个奇怪的语法错误,我想知道问题出在哪里

为什么图像会影响我的

是否可以设置用户在联系表单中输入的文本字体的样式

那里有一个类似于 ?