单行编辑框文本垂直居中(包含计算字体高度)

单行编辑框文本垂直居中(包含计算字体高度)

有时为了界面更漂亮,使用高度比较高的编辑框,但单行文本的编辑框文字是靠上显示的,反而不美观了,使文本垂直居中有两种方法:

1. 属性设为多行,不接收换行,然后计算中间位置,使用SetRect设置到文本位置(注意OnSize还要处理)

可在Create、OnCreate、PreSubClass里处理

2. 响应WM_NCCALCSIZE修改客户区居中,通过获取字体高度计算

[cpp]  view plain copy
  1. void CEditEx::OnNcCalcSize(BOOL bCalcValidRects, NCCALCSIZE_PARAMS* lpncsp)  
    {  
     TRACE("Enter %s\n", __FUNCTION__);  
      
     CString cstrText(_T("字体test"));  
     SIZE sz;  
     GetTextExtentPoint32(GetDC()->GetSafeHdc(), cstrText, cstrText.GetLength(), &sz);  
       
     int nBorder = (lpncsp[0].rgrc->bottom - lpncsp[0].rgrc->top - sz.cy) / 2;  
     if(nBorder < 0)  
      nBorder = 0;  
     lpncsp[0].rgrc->top += nBorder;  
     lpncsp[0].rgrc->bottom -= nBorder;  
      
     CEdit::OnNcCalcSize(bCalcValidRects, lpncsp);  
    } 

 

两种方法都要用到计算字体高度,有3个函数可以使用:

GetTextExtentPoint32
GetTextExtent
GetTextMetrics

[cpp]  view plain copy
 
      CDC*   pDC=GetDC();     
      TEXTMETRIC   tm;     
      pDC->GetTextMetrics(&tm);     
      int   nHeight=tm.tmHeight+tm.tmExternalLeading;     
      int   nWidth=tm.tmAveCharWidth; 

 

转载于:https://www.cnblogs.com/Dageking/archive/2013/03/14/2959339.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在HTML中,若要实现标签内的文本垂直居中,通常需要结合CSS样式来完成。有几种常见的方法可以实现垂直居中: 1. 使用`line-height`属性: 通过设置`line-height`的值与容器的高度相同,可以实现单行文本垂直居中。这种方法适用于容器内只有单行文本的情况。 ```css .vertical-center { height: 100px; /* 设置容器高度 */ line-height: 100px; /* 与容器高度相同 */ } ``` ```html <div class="vertical-center">这是垂直居中文本</div> ``` 2. 使用`display: table`和`display: table-cell`: 将容器的`display`属性设置为`table`,然后将文本所在元素的`display`属性设置为`table-cell`,再通过`vertical-align: middle`来实现垂直居中。 ```css .table-vertical-center { display: table; width: 100%; height: 100px; } .table-cell-vertical-center { display: table-cell; vertical-align: middle; } ``` ```html <div class="table-vertical-center"> <div class="table-cell-vertical-center">这是垂直居中文本</div> </div> ``` 3. 使用Flexbox: Flexbox布局提供了一种非常灵活的方式来对齐容器内的项目。通过设置父容器的`display`属性为`flex`,然后使用`align-items: center`来实现垂直居中。 ```css .flex-vertical-center { display: flex; align-items: center; height: 100px; } ``` ```html <div class="flex-vertical-center">这是垂直居中文本</div> ``` 4. 使用Grid布局: CSS Grid布局也可以用来实现垂直居中,通过设置父容器为网格布局,然后使用`align-items: center`来实现。 ```css .grid-vertical-center { display: grid; align-items: center; height: 100px; } ``` ```html <div class="grid-vertical-center">这是垂直居中文本</div> ``` 这些是实现HTML中标签文本垂直居中的几种常见方法。每种方法都有其适用场景,可以根据实际布局需求选择合适的实现方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值