个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我对文本的 SVG 对齐有问题。
JSFiddle:https://jsfiddle.net/ajhzdhff/2/
我希望“AN”从一开始就位于中心位置。
但如果我这样做:
.logo-svg {
margin-left: 16em;
transition-delay: 222ms;
}
在一台计算机上完全位于中心，但在另一台计算机上 - 不。
最佳答案
如果您不想依靠仔细调整的边距来使您的 SVG 居中，那么通过进行一些更改，您可以将居中留给浏览器。这意味着居中将继续工作，即使其他元素如 <p>尺寸变化。
这是我的做法:
<div> 中所以我们有一些东西要居中。如果你在页面上居中，那么你不需要这个。你可以只使用 <body> .给出 <div>宽度足以容纳整个 SVG (340px)。如果您的原始容器(或 <body>)比 SVG 宽，那么您也不需要它。
设置preserveAspectRatio="xMinYMid slice在 SVG 上。这使得 SVG 内容与 SVG 视口(viewport)左对齐而不是居中。 "slice"部分意味着它溢出 SVG 的 RHS，而不是按比例缩小以适合。
设置height SVG 的大小为 72，以便其宽度/高度比与 viewBox 相匹配。这是下一步工作所必需的。
设置 SVG 的宽度，使其仅覆盖前两个字母。由于宽度与 SVG 的最初可见部分(“AN”)相匹配，它会自动在容器中居中。
悬停时，。将 SVG 的宽度设置为全宽 (340px)。浏览器将重新放置新的、更宽的 SVG。
请参阅下面的工作演示。我在这里稍微简化了您的示例以使事情更清楚。
body {
text-align: center;
}
svg {
margin: 80px auto 0;
width: 106px;
}
svg:hover {
width: 340px;
}
.logo-type {
opacity: 0;
}
svg:hover .logo-type {
opacity: 1;
}
p {
font-size: 13px;
color: #777;
background: #333;
width: 15em;
margin: 3em auto;
padding: 0.75em 0;
}<body>
<div class="container">
<svg class="logo-svg" viewBox="0 0 224.8 47.6" width="340px" height="72px"
preserveAspectRatio="xMinYMid slice">
<g>
<g class="logo-type-group">
<path class="logo-type logo-type-code-ninero" d="M178,0v38.2h-54.4L109.4,24c0,4.7,0,9.5,0,14.2c-12.8,0-25.6,0-38.3,0V29h28.3V24H70.9c0-8,0-16,0-24c21.7,0,43.3,0,65,0
c0,3.3,0,6.6,0,10c-4.7,4.6-9.3,9.3-14,13.9c1.7,1.7,3.4,3.4,5.1,5.1c13.6,0,27.3,0,40.9,0c0-6.3,0-12.7,0-19h-19.1v17.2h-9.3
l0-27.2L178,0z M109.4,23.3c4.4-4.5,8.9-8.9,13.3-13.4h-13.3C109.3,14.4,109.4,18.8,109.4,23.3z M80.4,14.4c6.3,0,12.6,0,19,0
c0-1.5,0-2.9,0-4.4h-19V14.4z"></path>
<path class="logo-type logo-type-code-s" d="M224.8,0c-3.2,3.2-6.5,6.5-9.7,9.7c-7.2,0-14.4,0-21.6,0c-1.6,1.6-3.1,3.1-4.7,4.7c9.7,0,19.3,0,29,0c0,4.5,0,9,0,13.5
c-3.4,3.4-6.9,6.9-10.3,10.3c-9.3,0-18.6,0-27.9,0c0-3.1,0-6.1,0-9.2c7.7,0,15.4,0,23.1,0c1.7-1.7,3.4-3.4,5.1-5.1
c-9.4,0-18.8,0-28.3,0c0-5,0-9.9,0-14.9c3-3,6-6,9-9C200.6,0,212.7,0,224.8,0z"></path>
</g>
</g>
<path class="logo-an" d="M69.7,0c0,15.1,0,30.2,0,45.3c-10.3-10.3-20.7-20.7-31-31c0,7.9,0,15.8,0,23.8c-3.2,0-6.5,0-9.7,0c0-9.4,0-18.8,0-28.2
c-6.4,0-12.8,0-19.3,0c0,4.4,0,8.7,0,13.1c3-3,5.9-5.9,8.9-8.9c2.5,2.5,5,5,7.5,7.5c-8.7,8.7-17.3,17.3-26,26C0,31.7,0,15.9,0,0
c12.8,0,38.5,0,38.5,0c7.1,7.1,14.2,14.2,21.3,21.3c0-7.1,0-14.2,0-21.3C63.1,0,66.4,0,69.7,0z"></path>
</svg>
<p class="hover">***</p>
</div>
</body>关于html - 动画SVG的对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38289290/
24
4
0
我希望能够像在 jsFiddle 中那样将元素列表对齐到右侧的复选框。这是如何做到这一点的最佳实践？传统上我从来没有 float 过相互嵌套的元素，所以我想确定这是否是解决此问题的正确方法。 代码(h
指令.align n是什么意思在数组中做什么？ 更具体地说，假设我有以下部分代码: array: .align 2 .space 800 它的重要性是什么，为什么不跳过它并使用
基本上我正在寻找一种强制特定相对对齐的方法 即我想保证其他一些值(value) m s.t m > n alignment_of(foo) % 2^m == 2^n IE: .align 2^m; .
在我的代码中，我必须考虑一个数组数组，其中内部数组具有固定维度。为了使用 STL 算法，将数据实际存储为数组的数组很有用，但我还需要将该数据传递给 C 库，该库采用扁平化的 C 样式数组。 如果能够以
横向上，我想显示两个位图，并在它们之间显示一个标签字段。 代码看起来很简单，但所有字段都添加在屏幕左侧。 HorizontalFieldManager hfm = new HorizontalFiel
我想绘制一个变量名称及其符号。因为某些变量的名称很长，所以我试图将换行符与轴标签混合使用。这会导致对齐中发生有趣的事情: par(mar=c(1,12,1,1)) plot( y=1:6, 1:6,
使用这个脚本 df <- data.frame(x = 1:5, y = 1:5, color = letters[1:5]) ggplot(df, aes(x, y, fill = color))
我有一个带有标量字段的结构，比如妈妈，我想在屏幕上对齐的列中显示结构的值，可能还有一些标题。这是一个最小的工作示例: mom.a = 1; mom.b = 2; mom.veryLongName =
在 iOS6 中，我使用自动布局。 我有 2 个以编程方式创建的 View v1 和 v2。 v2 作为 subview 添加到 v1 v1 的约束已通过编程方式创建(此处未显示)。 我希望 v1 和
概述 浏览时operator new, operator new[] - cppreference.com ，似乎我们有许多选项来分配具有特定对齐要求的对象数组。但是，没有指定如何使用它们，而且我似乎
Widget _createProfileContainer() { return new Container( height: 64.0, child: ne
我正在使用 Bootstrap 和语义 UI 的组合来设计和对齐我的网页。目前，我在将页面 api map 和博客文章在整个页面上对齐时遇到问题，而不是像图像所示 那样堆叠在一起。 这是我的底层代码，
所以我已经添加了标签和所有内容，但我仍然在格式化和对齐所有内容时遇到问题。计算按钮显然应该居中。我知道使用 gridbag 将框架分割成坐标系，当一列大于其他列时，它会调整其他列并将其抛弃(对吗？)。
我必须将程序上的按钮对齐到中间，我运行的当前代码但显示的按钮与程序一样大，我想要一个特定大小的中心按钮，这是我尝试过的 /** * Created by Timk9 on 11/04/2016.
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了，我对它的功能印象深刻 并且我能够安装以下插件以提供更好的 IDE 体验 自动配对 Better-snipmate-snippe
在结构内对齐成员的最佳或常规方法是什么？添加虚拟数组是最佳解决方案吗？ 我有一个 double 的结构和 double 的三倍是吗？ struct particle{ double mass;
我正在尝试对齐我的输出，但由于某种原因我无法做到我多么想要它，这真的很令人沮丧。标题不会正确对齐。我不知道我是否正确使用了 setw()。 #include using std::cout; usi
我正在开发一个 android 应用程序，其相对布局如下所示。 这是应用程序在屏幕上的显示方式的 imgur 链接:http://imgur.com/c4rNJ .我希望“Text 1”出现在“a l
我不确定为什么我不能在下面的代码中调整按钮的位置。我有几行设置了边界，但我一定遗漏了一些东西。 public DayGUI() { mainFrame = new JF
我有一个 html 页面，我想在页面底部对齐一个 iframe，使 iframe 占据所有宽度，我无法在底部对齐 iframe。请找到底部的 iframe 标签页面。 The rest of th
我是一名优秀的程序员,十分优秀！