怎样让 callout 标题居中也可不让前面的小图标显示

HongDa · 2024 年11 月 27 日 06:44

遇到的问题

预期的效果

这是我PS的图片是我想要的效果，最好前面的小图标也不显示

Azona77 · 2024 年11 月 27 日 06:50

.callout-title {
    justify-content: center;
}
.callout-icon{
    display:none;
}

Azona77 · 2024 年11 月 27 日 08:06

只需要第一个不居中可以这样写

.callout > .callout-content .callout-title {
    justify-content: center;
}
.callout-icon{
    display:none;
}

只需要第一个居中：

.callout-title:not(.callout > .callout-content .callout-title) {
    justify-content: center;
}
.callout-icon{
    display:none;
}

HongDa · 2024 年11 月 27 日 08:19

.callout[data-callout=“default”] .callout-title {
justify-content: center;
}
这样只是约束特定的"default"文字居中，能约束特定的样式颜色居中嘛

Azona77 · 2024 年11 月 27 日 08:21

这个data-callout就是用于区分样式颜色的，就是你填写在 [!info] 中的 info

HongDa · 2024 年11 月 27 日 08:25

对对，这写只能限定这个单词居中，但我其实是想要
“>[!info] 标题’’ 这个"标题内置”居中，不是让中括号里的单词居中
是要让这个样式的 callout 后面的标题居中

Azona77 · 2024 年11 月 27 日 08:31

你用的是哪一个脚本？为什么会操作中括号中的单词？

HongDa · 2024 年11 月 27 日 08:34

没，上面的书写是我自己想的实验出来的，根据我的CSS 下面是我用的callout

.theme-dark,
.theme-light {
–callout-title-padding: 4px 12px;
–callout-padding: 0;
–callout-radius: var(–radius-m);
}
/================================================/
/* Root Colors
/================================================/
:root {
–800: #000000e0;
–800-RGB: 8, 9, 14;
–700: #17181e;
–700-RGB: 23, 24, 30;
–600: #292a2f;
–600-RGB: 41, 42, 47;
–500: #4f5053;
–500-RGB: 79, 80, 83;
–400: #68696c;
–400-RGB: 104, 105, 108;
–300: #818184;
–300-RGB: 129, 129, 132;
–200: #e1e2e9;
–200-RGB: 225, 226, 233;
–100: #f1f2f5;
–100-RGB: 241, 242, 245;
–000: #fbfcfc;
–000-RGB: 251, 252, 252;
–C001: #f18196;
–C001-RGB: 241, 129, 150;
–C002: #f19a81;
–C002-RGB: 249, 95, 42;
–C003: #ebcb8b;
–C003-RGB: 241, 201, 129;
–C004: #e3eb8b;
–C004-RGB: 198, 212, 49;
–C005: #bcf181;
–C005-RGB: 118, 234, 34;
–C006: #8df181;
–C006-RGB: 141, 241, 129;
–C007: #81f1a4;
–C007-RGB: 129, 241, 164;
–C008: #8be3eb;
–C008-RGB: 139, 227, 235;
–C009: #ab8beb;
–C009-RGB: 171, 139, 235;
–C010: #ee81f1;
–C010-RGB: 238, 129, 241;
–C011: #f181c5;
–C011-RGB: 241, 129, 197;
}

/================================================/
/* Light Theme
/================================================/
.theme-light {
–callout-content-background: var(–000) !important;
–callout-default: var(–800-RGB);
–callout-error: var(–C001-RGB);
–callout-warning: var(–C001-RGB);
–callout-help: var(–C002-RGB);
–callout-faq: var(–C002-RGB);
–callout-question: var(–C002-RGB);
–callout-tip: 219, 168, 64 /* var(–C003-RGB)/;
–callout-hint: var(–C003-RGB);
–callout-bug: var(–C003-RGB);
–callout-abstract: var(–C004-RGB);
–callout-summary: var(–C004-RGB);
–callout-tldr: var(–C004-RGB);
–callout-info: var(–C005-RGB);
–callout-important: 129, 220, 99/ var(–C006-RGB)/;
–callout-title-text: #fff;
}
/================================================/
/ Dark Theme
/================================================/
.theme-dark {
–callout-content-background: var(–800) !important;
–callout-default: var(–000-RGB);
–callout-error: var(–C001-RGB);
–callout-warning: var(–C001-RGB);
–callout-help: var(–C002-RGB);
–callout-faq: var(–C002-RGB);
–callout-question: var(–C002-RGB);
–callout-tip: var(–C003-RGB);
–callout-hint: var(–C003-RGB);
–callout-bug: var(–C003-RGB);
–callout-abstract: var(–C004-RGB);
–callout-summary: var(–C004-RGB);
–callout-tldr: var(–C004-RGB);
–callout-info: var(–C005-RGB);
–callout-important: var(–C006-RGB);
–callout-success: var(–C007-RGB);
–callout-todo: var(–C008-RGB);
–callout-quote: var(–C008-RGB);
–callout-example: var(–C009-RGB);
–callout-fail: var(–C011-RGB);
–callout-title-text: #000;
}

/================================================/
/* Distinctive Callouts
/================================================/
.callout {
background-color: rgba(var(–callout-color), 1);
}
.callout-icon .svg-icon,
.callout-title-inner {
color: var(–callout-title-text);
}
.callout-content > p:last-child,
.callout-content > ul:last-child,
.callout-content > ol:last-child {
margin-bottom: 0px;
}

.callout-content > p:first-child,
.callout-content > ul:first-child,
.callout-content > ol:first-child {
margin-top: 0px;
}

.callout-content {
border-top: 1px solid rgba(var(–callout-color), 0.64);
padding: 8px 16px !important;
}

.callout {
border: 1px solid rgb(var(–callout-color), 0.64);
}
.callout[data-callout=“help”],
.callout[data-callout=“faq”],
.callout[data-callout=“question”] {
border: 1px solid rgb(var(–callout-question), 0.64);
}

.callout[data-callout=“tip”],
.callout[data-callout=“hint”],
.callout[data-callout=“bug”] {
border: 1px solid rgb(var(–callout-bug), 0.64);
}

.callout[data-callout=“error”],
.callout[data-callout=“danger”],
.callout[data-callout=“attention”],
.callout[data-callout=“caution”],
.callout[data-callout=“warning”] {
border: 1px solid rgb(var(–callout-error), 0.64);
}

.callout[data-callout=“example”] {
border: 1px solid rgb(var(–callout-example), 0.64);
}

.callout[data-callout=“failure”],
.callout[data-callout=“missing”],
.callout[data-callout=“fail”] {
border: 1px solid rgb(var(–callout-fail), 0.64);
}

.callout[data-callout=“important”] {
border: 1px solid rgb(var(–callout-important), 0.64);
}

.callout[data-callout=“info”] {
border: 1px solid rgb(var(–callout-info), 0.64);
}

.callout[data-callout=“success”],
.callout[data-callout=“check”],
.callout[data-callout=“done”] {
border: 1px solid rgb(var(–callout-success), 0.64);
}

.callout[data-callout=“abstract”],
.callout[data-callout=“tldr”],
.callout[data-callout=“summary”] {
border: 1px solid rgb(var(–callout-summary), 0.64);
}

.callout[data-callout=“todo”],
.callout[data-callout=“cite”],
.callout[data-callout=“quote”] {
border: 1px solid rgb(var(–callout-todo), 0.64);
}
/================================================/

/* Edit button on right corner */
.markdown-source-view.mod-cm6 .edit-block-button {
padding: var(–size-2-2) var(–size-2-3);
position: absolute;
top: var(–size-2-2);
right: var(–size-2-2);
display: flex;
opacity: 0;
color: var(–text-muted);
border-radius: var(–radius-s);
cursor: cell;
}

/* Arrow down/up */
.callout-title {
color: var(–text-muted);
}

Azona77 · 2024 年11 月 27 日 08:39

我之前发的就是你居中的需求

HongDa · 2024 年11 月 27 日 08:41

我现在是基于这个 Callout 的 CSS 在修改我那个居中的需求

我就是把您给我的片段直接复制到这些片段下面的

为啥我一定要特定某一个样式的居中，而不单单只是最顶上的居中是因为我打算这个排版
ys1

HongDa · 2024 年11 月 27 日 08:44

非常感谢您的回复，因为前面的图标被隐藏了，其实中括号里的单词好像不重要了，就比如白色样式居中其他正常，类似这种，完全抛弃传统标题，因为我发现这个Callout 的折叠功能是有记忆的很棒，

Azona77 · 2024 年11 月 27 日 08:45

所以你是希望实现什么效果？第一个居中？特定样式居中？还是两者同时满足？

另外，不知道这里的default是指的什么？callout标识符应该不会出现在阅读模式中，不清楚你是如何约束标识符的位置的

Azona77 · 2024 年11 月 27 日 08:52

如果是只需要第一个居中，使用这个脚本即可了：

如果希望特定类别，则把脚本中的.callout 改为类似 .callout[data-callout=“tip”] 这种：

改为

.callout[data-callout="info"] > .callout-title {
    justify-content: center;
}
.callout-icon{
    display:none;
}

HongDa · 2024 年11 月 27 日 08:52

我希望的效果就是当我输入某一个特定样式的时候他是居中的不管它处于什么位置，只有输出这个单词他是居中标题

Azona77 · 2024 年11 月 27 日 08:53

这个应该是你希望的了，info改成你指定的标识符

HongDa · 2024 年11 月 27 日 09:00

非常感谢您，成功了！太牛了！

怎样让 callout 标题居中 也可不让前面的小图标显示

遇到的问题

预期的效果

怎样让 callout 标题居中也可不让前面的小图标显示