Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在块内垂直居中 #1

Open
TCOTC opened this issue Apr 6, 2024 · 4 comments
Open

在块内垂直居中 #1

TCOTC opened this issue Apr 6, 2024 · 4 comments

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Apr 6, 2024

比如说组成超级块的时候,希望能垂直居中:

image

变成这样:

image

@TCOTC TCOTC changed the title 在块的范围内垂直居中 在块内垂直居中 Apr 6, 2024
@Achuan-2
Copy link
Owner

Achuan-2 commented Apr 6, 2024

这个应该向思源官方反馈吧,思源的图片横向分栏也是这样的,都是顶边对齐,现在思源只有水平布局的设置,可以建议横向超级块添加垂直布局的设置
现阶段可以用代码片段顶顶

/* 横向超级块中图片和挂件垂直居中 */
.protyle-wysiwyg  .sb[data-sb-layout="col"]{
        align-items: center;
}

@Achuan-2
Copy link
Owner

Achuan-2 commented Apr 6, 2024

提了issue:siyuan-note/siyuan#10906

@TCOTC
Copy link
Contributor Author

TCOTC commented May 13, 2024

刚刚发现这个代码片段不止是把图片和挂件居中:

5652f248e3681f89b815fb84155516fa

@Achuan-2
Copy link
Owner

用这个吧,可能也有些问题,还是得等官方出垂直居中的布局

/* 横向超级块中图片和挂件垂直居中 */
.protyle-wysiwyg  .sb[data-sb-layout="col"]:has(.img),
.protyle-wysiwyg  .sb[data-sb-layout="col"]:has(.iframe){
        align-items: center;
}
/* 防止用自定义emoj的纯文本段落也垂直居中 */
.protyle-wysiwyg  .sb[data-sb-layout="col"]:has(.img[style="max-width: 30px;"]){
        align-items: start;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants