我的CSS弄乱了文字

时间:2018-07-25 16:54:01

标签: html css

我目前正试图使我的简历脱颖而出,使其具有特殊性,但是在尝试添加文本时,该文本将带有徽标。我的目的是让白盒越过徽标,不确定是否可行,但是无论如何。有什么帮助吗?非常感激。

#include <QtCore>

class Class1 {
  Q_GADGET
public:
  Q_INVOKABLE void foo() { qDebug() << "Class1::foo"; }
};

class Class2 : public QObject {
  Q_OBJECT
public:
  Q_SLOT void foo() { qDebug() << "Class2::foo"; }
};

class Class3 : public QObject {
  Q_OBJECT
public:
  Q_SLOT void bar() { qDebug() << "Class3::bar"; }
};

template <class C> QMetaMethod getMethod(const C& c, const char *signature) {
  auto const &mo = c.staticMetaObject;
  auto const nSignature = QMetaObject::normalizedSignature(signature);
  int index = mo.indexOfMethod(nSignature);
  if (index >= 0)
    return mo.method(index);
  return {};
}

int main() {
  Class1 c1;
  Class2 c2;
  Class3 c3;
  auto foo1 = getMethod(c1, "foo()");
  auto foo2 = getMethod(c2, "foo()");
  auto bar3 = getMethod(c3, "bar()");
  foo1.invokeOnGadget(&c1);
  foo2.invoke(&c2);
  bar3.invoke(&c3);  
}
#include "main.moc"
.container {
	text-align: center;
	color: black;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.boxed {
	margin: 25px;
	padding: 10px;
	border: black 1px;
}

编辑#1:

enter link description here中间(测试)中的文本希望位于徽标上方的白色框中,徽标所在的另一个框中。因此,文字应在徽标上方且笔直,不能倾斜。

1 个答案:

答案 0 :(得分:0)

因此,听起来您想要一个居中的标题文本,并在其下面有一个居中的徽标。鉴于此,您可以使用flexbox来居中,并只需按照希望元素显示的顺序对html进行排序。

.centered {
  display: flex;
  justify-content: center;
}

.title {
  padding: 10px;
  // border: thin solid black; --> uncomment this to see the border
}

.logo {
  padding: 10px;
  max-height: 100px;
  // border: thin solid black; --> uncomment this to see the border
}
<html>

<div class="codepad-logo ">
  <div class="centered title">test</div>
  <div class="centered">
    <img src="https://i0.wp.com/royalepremierleague.com/wp-content/uploads/2016/03/css-logo.png" class="logo" />
  </div>
</div>

</html>